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Este livro serve 
para você? 

Este livro se destina a todos aqueles que precisam criar páginas mas que não 
têm qualquer tipo de treino formal em design. Não me refiro apenas àqueles que 
estão criando embalagens incríveis ou folhetos extensos: falo das secretárias 
cujos chefes, hoje em dia, solicitam que elas criem os jornais informativos (newsletters); 
dos voluntários religiosos que estão montando materiais com informações sobre 
suas congregações; dos pequenos empresários que estão criando seus próprios 
anúncios; dos estudantes que compreendem que um trabalho com uma boa 
aparência pode significar uma nota melhor; dos profissionais que têm consciência 
de que uma apresentação interessante conquista mais respeito; dos professores 
que aprenderam que os alunos reagem de maneira muito mais positiva às informações 
dispostas de maneira mais estética; aos profissionais da área de estatística que 
estão notando que os números e as porcentagens podem ser organizados de 
maneira a convidar à leitura e não a dormir. 

Aqui parto do pressuposto de que os leitores não têm tempo ou vontade de 
estudar design e tipografia, mas gostariam de saber como criar suas páginas com 
uma estética melhor. A maioria das pessoas tem capacidade de olhar para uma 
página com um design pobre e concluir que não gostam dela, mas não saberiam o 
que Jazer para melhorá-la. Aqui abordarei quatro conceitos básicos utilizados praticamente 
em todos os bons trabalhos de criação. Esses conceitos são claros e concretos. Se 
você não sabe o que há de errado em uma página, como poderá ajustá-la? Quando 
conhecer os conceitos, saberá dizer se eles foram ou não aplicados em suas páginas. 
Quando se pode dar nome a um problema , é possível encontrar a solução. 

O objetivo deste livro não é substituir quatro anos de estudos na área de design. 
Não tenho a pretensão de achar que você se transformará automaticamente em 
um brilhante designer após a leitura desta obra, mas garanto que você jamais 
olhará para uma página da mesma maneira. Garanto que se você seguir estes 
princípios básicos, seu trabalho terá uma aparência mais profissional, organizada, 
unificada e interessante. E... você se sentirá fortalecido. 


Carinhosamente, 
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Míni-glossário __ 

Os termos a seguir são utilizados neste livro. Para 
conhecer um glossário completo de design e de termos 
tipográficos, veja outro livro de minha autoria: How lo 
Boss Your Fonts Around (Como Trabalhar com Fontes). 

Á linha de base é a linha invisível sobre a qual o tipo está 
posicionado (veja a página 94). 

Texto corrido, mancha de texto e, às vezes, apenas 
mancha ou texto referem-se ao principal bloco de texto 
lido, que é o oposto de títulos principais, subtítulos, 
títulos etc. O texto corrido costuma ser apresentado entre 
os tamanhos (corpos) 9 e 12. 

Um sinal de tópico (também conhecido como tópico) é 
um pequeno marcador que costuma ser utilizado em 
uma lista, substituindo os números ou, ainda, pode ser 
colocado entre palavras. Este é o sinal de tópico comum: • 

Um díngbat é um caractere pequeno, ornamental, 
como estes: Você deve ter as fontes Zapf 

Dingbats ou WingDings, que são feitas de dingbats. 

Elementos são os objetos individuais da página. Um 
elemento pode ser uma única linha de texto, uma 
imagem ou, ainda, um conjunto de itens tão próximos 
entre si que são considerados como uma unidade. Para 
saber o número de elementos que existe em uma 
página, pisque os olhos e conte quantas vezes eles 
param para olhar cada item individualmente. 

Texto extenso refere-se ao texto corrido (como no 
parágrafo acima), quando há muito texto. Exemplo: um 
livro ou um longo relatório. 

Quando menciono seu olho ou o fluxo dos olhos, refiro- 
me aos seus olhos como se eles fossem um ser 
independente. Pode-se controlar a maneira através da qual 
uma pessoa movimenta os olhos quando está vendo uma 
página (o fluxo dos olhos). Portanto, é preciso ser mais 
consciente sobre como seus olhos se movimentam quando 
você está olhando para uma página. 

O texto justificado é um bloco de texto alinhado em 
ambos os lados (o direito e o esquerdo). 

Um fio é uma linha desenhada, como a que foi usada 
no título "Míni-glossário". 

Espaço em branco é o espaço de página que não é 
preenchido por textos ou figuras. Os iniciantes tendem a 
não utilizar o espaço em branco; os profissionais da 
área de design gráfico utilizam muitos espaços em 
branco. 

O espaço em branco distribuído ocorre quando o 
espaço em branco de uma página está preso entre os 
elementos (como textos ou fotos), sem espaço para fluir. 
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PRINCÍPIOS DE DESIGN Q 



Este pequeno capítulo explica os quatro princípios básicos gerais. Cada 
um deles será abordado detalhadamente nos próximos capítulos. Mas, 
em primeiro lugar, gostaria de contar uma pequena história que me fez 
perceber a importância de se poder dar nome às coisas, já que a nomeação 

desses princípios é a chave para controlá-los. 

F fÁyí 

Há muitos anos recebi um livro de identificação de árvores como presente 


de Natal. Estava na casa de meus pais e depois que todos os presentes 


haviam sido abertos decidi sair e identificar as árvores da vizinhança. 


Antes de sair, li uma parte do livro. A primeira árvore do livro era a iúca, 
pois, para identificá-la, só eram necessárias duas pistas. Ora, a iucá tem 
uma aparência realmente estranha. Olhei para a foto e pensei: "Mas este 
tipo de árvore não existe no norte da Califórnia. Ela é diferente. Eu saberia 
se já tivesse visto uma árvore assim e nunca vi uma antes." Peguei meu 
livro e saí. Meus pais viviam em um condomínio fechado de seis casas. 
Dessas seis, quatro tinham iúcas em seus jardins. Vivi naquela casa du¬ 
rante 13 anos e nunca havia visto aquelas árvores. Caminhei pelo quarteirão 
e imaginei que na época em que os proprietários estavam fazendo os 
jardins de suas casas, deve ter havido alguma liquidação: pelo menos 80% 
das casas tinham iúcas. E eu nunca havia visto uma antes! Quando me conscientizei 


da existência da árvore, quando pude classificá-la, passei a vê-la em todos 
os lugares. Esse é o x da questão; é onde eu queria chegar: o fato de 
podermos dar nome a algo significa que estamos conscientes deste algo... 
temos poder sobre ele... nós o possuímos e estamos no comando. 


Agora você aprenderá os nomes de vários princípios de design e poderá 
controlar a diagramação de suas páginas. 
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Os quatro princípios básicos 

Veja a seguir uma abordagem genérica dos princípios. Apesar de eu descrevê- 
los separadamente no decorrer do livro, lembre-se de que eles estão inter- 
relacionados. Raramente apenas um dos princípios será utilizado. 

Contraste 

O objetivo do contraste é evitar elementos meramente similares 
em uma página. Se os elementos (tipo, cor, tamanho, espessura 
da linha, forma, espaço etc.) não forem os mesmos, diferencie- 
os completamente. O contraste costuma ser a mais importante 
atração visual de uma página. 

Repetição 

Repita os elementos visuais do design e espalhe-os pelo ma¬ 
terial. Você pode repetir a cor, a forma, a textura e as relações 
espaciais como a espessura, os tamanhos etc. Isso ajuda a 
criar uma organização e fortalece a unidade. 

Alinhamento 

Nada deve ser colocado arbitrariamente em uma página. Cada 
elemento deve ter uma ligação visual com outro elemento da 
página. Isso cria uma aparência limpa, sofisticada e suave. 

Proximidade 

Itens relacionados entre si deveriam ser agrupados. Quando 
vários itens estão próximos, tornam-se uma unidade visual, e 
não várias unidades individualizadas. Isso ajuda a organizar 
as informações e reduz a desordem. 





m 


Proximidade 


As páginas criadas pelos iniciantes costumam ter palavras, frases e imagens 
espalhadas, preenchendo cantos e ocupando muito espaço, de maneira 
que não sobre espaço livre. Parece haver certo medo dos espaços vazios. 
Quando as partes que compõem uma página são espalhadas, esta página 
assume uma aparência desorganizada e é possível que as informações 
não fiquem imediatamente acessíveis para o leitor. 

Segundo o princípio da proximidade, itens relacionados entre si devem 
ser agrupados e aproximados uns dos outros, para que sejam vistos 
como um conjunto coeso e não como um emaranhado de partes sem 
ligação. Itens ou conjuntos de informações que não estão relacionados 
entre si não deveriam estar próximos; isso oferece ao leitor uma pista 
visual imediata da organização e do conteúdo da página. As páginas a 
seguir ilustram esse princípio. 
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Dc uma olhada neste cartão de visita. Quantos elementos individuais 
você pode ver nesse pequeno espaço? Quantas vezes seu olho pára para 
visualizar algo? 


▼ Por acaso seu olho parou cinco vezes? Lógico: há cinco itens 
independentes neste pequeno cartão. Por onde você começou a 
leitura? Provavelmente pela parte central, porque a frase do meio é 
a com maior evidência (negrito). O que v/o cê leu a seguir (da 
esquerda para a direita)? O que aconteceu quando você alcançou o 
canto inferior direito; para onde seu olho se dirigiu? Ele ficou 
vagando para certificar-se de não ter perdido alguma informação 
espalhada pelos cantos? 


Reilly Pickett 

(717)555-1212 j 

To a d 

Hall 

916 Old River Road 

Red River, NM 


▼ E se eu confundir ainda mais as coisas? 


Reilly Pickett 

(717)555-1212 í 

j 

Toa d 

Hall 

916 Old River Road 

Red River, NM 


▲ Agora que existem duas frases em negrito (bold), por onde 
começar? Pelo canto superior esquerdo ou pelo meio? E após ler 
esses dois itens, para onde seu olho vai? Talvez você fique indo e 
vindo entre as duas palavras em negrito, em uma tentativa 
angustiada de “capturar” as outras palavras colocadas nos cantos. 
É fácil determinar o fim da leitura? Seu amigo fez a leitura da 
mesma maneira que você? 
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Quando vários itens estão próximos entre si, eles se tornam uma unidade 
visual e não várias unidades separadas. Assim como na vida, a proximidade 
implica em uma relação 

Várias coisas acontecem quando elementos similares são agrupados em 
uma unidade. A página fica mais organizada. É possível saber por onde 
começar a leitura e onde terminá-la. Além disso, o espaço em branco (o 
espaço ao redor das letras) também fica mais organizado. 


▼ Um problema do cartão anterior é que nenhum 
dos itens parece estar relacionado a qualquer 
outro. Não está claro por onde a leitura deve 
começar ou terminar 

Se eu fizer uma coisa neste cartão de visita 
— agrupar os elementos relacionados — , 
veja o que acontece: 


Toad Hall 

Reilly Pickett 


916 Old River Road 
Red River, NM 
(717) 555-1212 


▲ Será que ainda existe alguma dúvida sobre 
onde começar a ler o cartão? E sobre o final? 
Veja, observando este conceito muito simples, 
este cartão está organizado tanto lógica quanto 
visualmente. 
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A seguir você verá um típico cabeçalho de newsletter (jornal). Quantos 
elementos separados se encontram neste material? De acordo com o 
posicionamento, existe algum item relacionado a outro? 


▼ Pense um pouco para decidir quais são os itens 
que deveriam ser agrupados e quais deveriam 
ficar separados. 


UNIVERSIDADE DO OESTE 

O QUE ESTÁ ACONTECENDO NA... 


EXTENSÃO COOPERATIVA 



FLORESTA DO MUNICÍPIO DE REDWOOD 


Agosto - 1996 


▲ Os dois itens da parte superior esquerda estão 
próximos entre si, o que implica em uma relação. 
Deveria haver uma relação entre eles? 


▼ Qual é a sua conclusão lógica? Foram 
estabelecidas as devidas relações? 



O que está acontecendo na... 

Floresta do Município de Redwood 


Universidade do Oeste 
Extensão Cooperativa 
Agosto 1996 


▲ Observe que eu fiz outras coisas: 

Mudei tudo de maiusculas (caixa-alta) para maiusculas 
e minúsculas (alta e baixa), o que me deu espaço para 
fazer com que o título ganhasse mais peso; assim, o 
texto ficou com uma leitura mais fácil. 

Tirei os cantos redondos e substituí por cantos retos, 
criando uma aparência mais clara e mais forte. 

Aumentei as árvores e deixei que elas ultrapassassem 
o contorno (este é um truque gráfico muito utilizado). 
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Na criação de um anúncio, folheto, newsletter ou de outro material, já se 
sabe desde o início, pela lógica, quais informações estão conectadas, quais 
informações deve ser enfatizadas e o que pode ser abrandado. Expresse 
as informações graficamente, agrupando-as. 


CD ROMs 


CD ROMs 

CD ROMs 

CDs para crianças 

CDs educacionais 

CDs de lazer 


CD ROMs 

CDs para crianças 

CDs educacionais 

CDs de lazer 

Discos laser 

Discos laser 

Educacional 

Aprendizado inicial 
Idiomas 

Ciências 


Educacional 

: 


Aprendizado inicial 
Idiomas 

Ciência 

Matemática 

Matemática 

Material do professor 

Livros 

Material do Professor 


Material do Professor 

Livros 

Material do professor 
Vídeos 

Vídeos 

Hardware e Acessórios 

Cabos 

Dispositivo de entrada 
Armazenamento 

Memória 

Modems 

Impressoras e acessórios 
Vídeo e som 

___ 


Hardware & Acessórios 

Cabos 

Dispositivo de entrada 

Armazenamento 

Memória 

Modems 

Impressoras e acessórios 
Vídeo e som 


▲ £ claro que esta lista 
precisa de uma 
formatação para ficar 
inteligível. Porém, o maior 
problema é que tudo está 
próximo de tudo, não 
sendo possível descobrir a 
relação ou a organização. 


▲ A mesma lista foi criada 
através dè grupos visuais, 
lenho certeza de que você 
já trabalha assim 
automaticamente; estou 
apenas sugerindo que você, 
agora, proceda dessa forma 
conscientemente e com mais 
força. Observe que eu 
acrescentei contraste aos 
títulos e repeti esse contraste 
e o fio (a linha). 
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Às vezes, ao agrupar itens relacionados, torna-se necessário fazer algumas 
alterações, como de tamanho, peso, posicionamento de texto ou de figuras. 
O texto não precisa estar com 12 pontos, e as informações subordinadas 
à mensagem principal, como o número do volume e o ano do newsletter, 
podem ser pequenas, com 7 ou 8 pontos. 



Séries de Concertos de Câmara 

Escola Santa Rosa 

6 a -feira, 03 de fevereiro, às 20:00 
Quarteto de cordas Alexander 
Mozart, K387, Bartok n°3, Beethoven, Opus 59, n°1 
Sam Pritchert & Ethel Libitz, violinos,- 
Sandra Yarbrough, viola,- Mark Wilson, violoncelo 
ô a -feira, 01 de março, 20:00 
Trio Artaria 

Trio "Archduke" de Beethoven e Trios de Haydn, 

Schoenberg e Magnard 
Richard Samson Norartz, violino 
Recepção e concerto na Qaleria de arte SRJC 
ó a -feira, 26 de abril, às 20:00 
Orquestra de Câmara Santa Rosa 
Quarteto para piano em sol menor de Brahms, 

Sonata Arpeggione de Schubert 
Polly Hollyfíeld, violino,- Linda Batticioli, viola,- 
Norinne Antiqua-Tempest, violoncelo,- 
Margaret Park-Raynolds, flauta,- Robin Plantz, piano 
Todos os concertos acontecerão no Auditório Newman, 

Hall Emeritus, Educação Comunitária 
Ingressos a R$10,00 e R$8,00 
Telefone para informações (012) 527-4371 


▲ Além de ser extremamente entediante, é difícil encontrar as 
informações: os eventos, onde eles acontecem, o horário etc. 
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O conceito de proximidade não significa que tudo precise estar próximo; 
significa que os elementos logicamente conectados, com algum tipo de 
ligação, também deveriam estar visualmente conectados. Outros elementos 
separados ou conjuntos de elementos não deveriam estar juntos. A 
proximidade ou a falta de proximidade indica a relação. 



Newman* Hafl Emeritus 


Séries de Concertos de Câmara 


Quarteto de Cordas Alexander 

Mozart, K387, Bartok n° 3, Beethoven, Opus 
Sam Prítchert e Ethel Libitz, violinos,- 
Sandra Yarbrough, viola,- Mark Wilson, violonofío 
6 a -feira, 08 de fevereiro, às 20.-00 i / 

/ 

Trio Artaria 

Trio "Archduke" de Beethoven 
e trios de Haydn, Schoenberg and M 
Richard Samson Norartz, violino 
6 a -feira, 01 de março, 20:00 
Recepção e concerto na Qaleria SRjC 

Orquestra de Câmara Sant 

.. r.l \ 1 n 1 1 


Quarteto para Piano em Sol Merror,^lc Brahrris, 
Sonata Arpeggione de Schubert 
Polly Hollyfield, violino, Linda Battiti 
Norinne Antiqua-Tempest, violoncelo,- 
Margaret Park-Raynolds, flauta, 

6 a -feíra, 26 de abril, às 20:00 


Todos os concertos acontecerão no Audíti 
Escola Santa Rosa 
Educação Comunitária 
Ingressos a R$10,00 e R$8,00 
Telefone para informações: (012) 527.4371 


▲ Primeiro, as informações foram agrupadas por assunto 

(mentalmente ou em um rascunho); depois, foram agrupadas na 
página. Observe que o espaço entre as três apresentações é o 
mesmo, o que indica que esses três grupos estão ligados de alguma 
forma. As informações subordinadas estão mais distanciadas; fica 
óbvio que não são performances. 
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É provável que você esteja utilizando o princípio da proximidade em seu 
trabalho, mas talvez não esteja fazendo tudo o que poderia para que ele 
seja bem-aproveitado em sua totalidade. Olhe atentamente para estas 
páginas e elementos e veja quais itens poderiam ser agrupados. 



A Aparentemente, a pessoa que criou este anúncio inseriu dois 

retornos de carro (pressionando a tecla Return) após cada subtítulo 
e parágrafo do texto corrido. Portanto, os subtítulos estão a uma 
distância igual acima e abaixo do texto corrido, o que faz com 
que eles pareçam ser itens separados e desconexos. 

Há muito espaço em branco neste anúncio, mas completamente 
fragmentado. Além disso, também há espaços em branco onde não 
deveria haver; como, por exemplo, entre o subtítulo e o texto 
pertencente a ele. Quando o espaço em branco está distribuído, 
como nesse caso, a tendência é de separar visualmente os elementos. 



PROFISSIONAIS DE RODEIO! 


Não seria incrível se... 

Você pudesse aprender e treinar pessoalmente com um 
campeão mundial de rodeios em um pequeno grupo ou em 
aulas particulares? 

Não seria incrível se... 

Você estivesse treinando em algum lugar coberto, com as 
maiores vantagens e com gravação de vídeos em grande telas? 

Não seria incrível se... 

Você pudesse praticar sem limites de tempo até ficar satisfeito 
ou até cair? 

Não seria incrível se... < 

Você pudesse ficar nas melhores acomodações, com a melhor 
comida que já comeu na vida? 

Não seria incrível se... 

Você soubesse onde encontar 
um cavalo com o qual 
pudesse começar a treinar 
ou ganhar? 

Adivinhe só! Esse lugar existe! 

Para maiores informações, telefone 
ou escreva para 

Campos de Rodeio 
Duro na Queda 

Moon Rd.. Box 36 
Tombstone, Texas 74444 
(828)588-0418 
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Realmente, a proximidade é apenas uma questão de conscientizarmos e 
fazermos o que já se faz naturalmente, mas com mais profundidade na 
aplicação do conceito. Uma vez consciente da importância das relações 
entre as linhas de texto, você começará a notar esse efeito. Quando 
começar a notar esse efeito, você o dominará, terá poder sobre ele: 
você comandará tudo. 



GALARIA 


VINHO 


NUNCA NA HISTORIA 
DO GALARIA 

ALGUÉM PODE CONHECER OS 50 
RESTAURANTES GALARIA E OS 50 
ESTABELECIMENTOS VINÍCOLAS EM UM ÚNICO LO¬ 
CAL, EM UM ÚNICO DIA. NÃO PERCA! JUNTE-SE A 
NÓS NO GRANDE EVENTO DA 3 § FESTA ANUAL 
GALARIA VINHO E CHILI, NESTE SÁBADO, DAS 12:00 
ÀS 16:30, NO EL DORADO HOTEL. R$ 30,00 POR 
ENTRADA, COM DIREITO ILIMITADO A PROVAR VINHOS, 
UM COPO DE BRINDE E MUITA DIVERSÃO. E MAIS: 
UMA PARTE DA VERBA BENEFICIARÁ A BRIGADA DE 
ALIMENTOS GALARIA, QUE AJUDARÁ A ALIMENTAR 
OS FAMINTOS. ENTRADAS ANTECIPADAS DISPONÍVEIS 
NO GALARIA NEWS E NO PLAZA AMERICADO. 
ENTRADAS LIMITADAS TAMBÉM ESTARÃO À DIS¬ 
POSIÇÃO NA PORTA. 


ATirei esse anúncio assim do jornal. Juro que sim. Um dos maiores 
problemas (além das letras estarem todas em caixa-alta, ou 
maiusculas) é que todas as informações estão em um único bloco. 

Antes de tentar trabalhar o design com essas informações, escreva 
separadamente as informações que devem ficar agrupadas; agrupe 
os elementos. Você sabe como fazê-lo: basta raciocinar 

Quando os conjuntos de informações estiverem formados, você 
poderá trabalhar com eles na página. 
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É muito raro que o uso do princípio da proximidade seja a única solução 
para uma página problemática. Os outros três princípios são intrínsecos 
ao processo de design e, em geral, você perceberá que está aplicando os 
quatro. Aprenda um de cada vez; comece pelo da proximidade. 


Alínea 

na 

história 

do 

Galaria.. 

T GALARIA 

E VINHO 
CHILI s 




Você pode conhecer os 
50 restaurantes Galaria 
e os 50 estabeleci¬ 
mentos vinícolas em um 
único local, em um 
único dia. Não perca! 

R$ 30,00 por entrada, 
com direito ilimitado a 
provar vinhos, um copo 
de brinde e muita 
diversão. 

Uma parte da verba 
beneficiará a Brigada de 
Alimentos Galaria, 

(pie ajudará a alnnentar 
os famintos. 


Entradas antecipadas disponíveis no Calaria 
News e no Plaza Americado. Entradas limitadas 
também estarão à disposição na bilheteria. 


3- Festa 

Anual 
Galaria 
Viáo e Chili 

Neste sábado, 
das 12:00 às 16:30, 
no El Dorado Hotel 


▲ Esta é apenas uma dentre as inúmeras possibilidades para 
organizar os conjuntos de informações, lambem utilizei os 
princípios de alinhamento e contraste, que você conhecerá 
em breve. 

Porém, o maior inconveniente do anúncio original é o de que não 
existe uma separação das informações. A colocação do texto 
inteiro em caixa-alta (letras maiúsculas), em um único bloco, 
também ocupou todo o espaço, de maneira que não sobraram 
espaços adicionais (ou em branco) para que seus olhos 
descansassem. É possível deixar o tamanho das letras (também 
conhecido como “corpo”) menor do que 12 ou 14. Verdade! 
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Resumo 

Quando vários itens estiverem próximos, eles formarão uma unidade 
visual e não várias unidades individuais. Os itens relacionados entre si 
devem ser agrupados. Fique atento! Veja para onde seus olhos se dirigem. 
Qual é o caminho que eles seguem? Onde termina a leitura? Após a 
leitura, para onde seus olhos vão? Você deveria seguir uma progressão 
lógica durante a leitura da página, partindo de um início bem-definido 
para um final bem-definido. 

0 propósito básico 

O propósito básico da proximidade é o de organizar. Os outros princípios 
também têm suas funções, mas o simples agrupamento de elementos 
relacionados em proximidade cria, automaticamente, uma organização. 
Se as informações estiverem organizadas, o texto será mais fácil de ler e 
de memorizar. Como resultado da organização da comunicação, também 
se cria brancos (o termo preferido dos designers) mais atrativos (mais 
organizados). 

Como atingir este objetivo 

Pisque os olhos e conte o número de elementos visuais da página pelo 
número de paradas dos seus olhos. Se houver mais de 3-5 itens na página 
(é claro que este número depende do material), veja dentre os itens separados 
quais poderiam ser agrupados em proximidade, para que se tornem uma 
unidade visual. 

O que evitar _ 

Evite muitos elementos separados em uma página. 

Não coloque os itens somente nos cantos e no meio da página. 

Evite deixar quantidades iguais de espaços em branco entre os elementos, 
a não ser que cada conjunto seja parte de um subgrupo (veja o exemplo 
na página 21). 

Evite criar qualquer dúvida quanto à relação dos elementos entre si, ou 
seja, cada subtítulo, legenda, imagem etc. devem estar junto a seu respectivo 
par. Crie uma relação entre os elementos através da proximidade. 

Não relacione elementos que não devam estar agrupados! Se eles não 
estiverem relacionados, separe-os. 







□ 

Alinhamento 


Os iniciantes em design tendem a colocar o texto e a imagem em qualquer 
lugar da página que tenha espaço, e o fazem, geralmente, sem consciência 
dos outros itens existentes naquela página. Isso resulta no efeito tão 
desorganizado que você já conhece, que é como uma cozinha desarrumada: 
uma xícara aqui, um prato lá, um guardanapo no chão, um pote na pia, 
água no chão. Não é muito difícil arrumar tudo nesta cozinha um pouco 
bagunçada, assim como não é muito difícil arrumar uma página confusamente 
diagramada, com alinhamentos mal-determinados. 

Segundo o princípio do alinhamento, nada deve ser colocado arbitrariamente 
em uma página. Cada item deve ter uma conexão visual com algo na página. 

O princípio do alinhamento obriga a pessoa a ser mais consciente: já 
não se pode simplesmente jogar as coisas na página nos lugares onde 
houver espaço. 

Quando os itens são alinhados na página, há uma unidade coesa, mais 
forte. Mesmo quando os elementos estiverem fisicamente separados uns 
dos outros, se estiverem alinhados, haverá uma linha invisível conectando- 
os, tanto em relação aos seus olhos quanto a sua mente. Apesar de posicionar 
alguns elementos separadamente, indicando suas ligações de acordo com 
o princípio da proximidade, é o princípio do alinhamento que avisará ao 
leitor que, mesmo não estando próximos, os itens fazem parte do mesmo 
material. As páginas a seguir ilustram essa idéia. 
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Dê uma olhada neste cartão de visita (o mesmo que você já viu no 
último capítulo). Parte do seu problema é que nada está alinhado com 
nada. Neste pequeno espaço existem elementos alinhados no canto esquerdo, 
no direito e na parte central. Nenhum dos textos — nem os dos dois 
cantos superiores, nem os dos dois inferiores — está alinhado pela mesma 
linha de base; também não estão alinhados nos cantos esquerdo ou direito. 


Reilly Pickett 

(717)555-1212 

Toad 

Hall 

916 Old River Road 

Red River, NM 


◄ 

Parece que os elementos 
deste cartão foram 
simplesmente jogados em 
qualquer lugar e colados. 
Nenhum dos elementos 
tem qualquer conexão 
com qualquer outro 
elemento do cartão. 


Toad Hall 

Reilly Pickett 


916 Old River Road 
Red River, NM 
(717) 555-1212 


◄ 

Movendo todos os 
elementos para a direita e 
alinhando-os de maneira 
igual, as informações ficam 
mais organizadas. (É claro: 
você deve ter percebido 
que eu também agrupei 
elementos interligados em 
proximidade entre si.) 


Agora os itens possuem um 
limite comum que os conecta. 






5 DESIGN : ALINHAMENTO EH 


No exemplo (repetido a seguir) que você viu na seção sobre proximidade, o 
texto também estava alinhado pela parte central. Mas se ele ficar alinhado 
pela esquerda ou pela direita, a linha invisível que o conecta ficará mais 
forte, pois terá um limite vertical a seguir. Isso faz com que os textos alinhados 
à esquerda e à direita fiquem com aspecto mais limpo e mais forte. Compare 
os dois exemplos a seguir. Falaremos sobre eles nas próximas páginas. 


► 

Este exemplo mostra 
uma boa disposição, 
com os blocos de texto 
agrupados em uma 
proximidade lógica. 
O texto está centralizado 
pelas suas linhas e 
centralizado na página. 


Toad Hall 

Reilly Pickett 


916 Old River Road 
Red River, NM 
(717) 555-1212 


► 

Este exemplo apresenta 
a mesma organização 
visual, mas está alinhado 
à direita. Agora o canto 
bem delimitado à direita 
ficou visível. A linha invisível 
que conecta as 
extremidades dos 
dois conjuntos de texto 
é mais forte se comparada 
à opção com o 
alinhamento centralizado. 


Toad Hall 

Reilly Pickettj 


916 Old River Roacj 
Red River, Nivj 
(717)555-1212 


▲ 

A linha invisível 
passa por aqui, 
conectando o texto. 
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Você costuma centralizar tudo automaticamente? O alinhamento centralizado 
é o mais usado pelos iniciantes: é muito seguro e a sensação de usá-lo é 
de conforto. O alinhamento centralizado cria uma aparência mais for¬ 
mal, mais comum e sem brilho. Dê uma olhada nas diagramações de que 
você mais gosta. Aposto que a maioria dos materiais com uma estética 
sofisticada não está centralizada. Sei que é difícil para um iniciante libertar- 
se do alinhamento pelo centro; você precisará forçar-se a fazê-lo uma 
primeira vez. Mas experimente combinar o alinhamento à esquerda ou à 
direita com o bom uso da proximidade e ficará surpreso com as mudanças 
que ocorrerão em seu trabalho. 




Planejamento 

Planejamento 


Cia. Red Hen 

Cia. Red Hen 



por Shannon Williams 

SO de março de 1999 





por Shannon Williams 

SO de março de 1999 





▲ Esta é uma típica capa de 
relatório, certo? 

Este formato padrão 
tem uma aparência sem 
brilho, quase amadora, 
capaz de influenciar a 
reação inicial de uma pessoa 
em relação ao relatório. 


A A força do alinhamento à 
esquerda confere à capa do 
relatório uma aparência 
mais sofisticada. Mesmo 
que o nome da autora 
esteja distante do título, a 
linha invisível criada pelo 
alinhamento conecta os dois 
blocos de texto. 
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Não estou sugerindo que você nunca centralize nada! Basta estar consciente 
do efeito do alinhamento pelo centro. Será que é realmente esta a aparência 
que você deseja criar? Às vezes é. Por exemplo: os casamentos costumam 
ser eventos formais, portanto, se você quiser centralizar o texto do seu 
convite de casamento, poderá fazê-lo. 

Às vezes é possível dar uma pitada de graça à opção centralizada, como, 
por exemplo, centralizar o texto colocar o próprio bloco de texto fora de 
centro. Outra opção é colocar as letras mais acima na página, para criar 
mais "tensão"; você também pode usar uma fonte muito casual e engraçada, 
com um alinhamento muito formal, centralizado. 


Você está 
carinhosamente 
convidado a assistir/ 


▲ Centralizado. Realmente 
comum. 



▲ Se você quiser centralizar o 
texto, pelo menos faça com 
que ele fique centralizado de 
maneira óbvia. 



A Experimente descentralizar o 
bloco com o texto 
centralizado. 


Você 

está 

carinh.osam.ente 

convidado 

a 

assistir/ 


A Se você centralizar o 
texto, tente fazê-lo ficar 
mais expressivo de alguma 
maneira. 
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Você está habituado a trabalhar com alinhamentos de texto. Até adquirir 
mais experiência, lembre-se de uma regra: utilize apenas um alinhamento 
de texto por página, ou seja, o texto deve ser todo alinhado à esquerda, 
alinhado à direita ou centralizado. 


Este texto está 

alinhado à 
esquerda. 

Algumas pessoas o 
classificam como 
irregular à direita. 


Este texto está 

alinhado à 
direita. Algumas 
pessoas o classificam 
como irregular à 
esquerda. 


Este texto está 

centralizado. 

Se você preferir o texto 
centralizado, faça com que a 
centralização seja óbvia. 


Por exemplo, neste parágrafo 
é difícil dizer se o texto foi 
centralizado propositalmente 
ou, talvez, involuntariamente. 
As larguras das linhas não 
são as mesmas, mas não são 
completamente diferentes. 

Se você não souber visualizar 
imediatamente a centralização, 
por que fazê-lo? 


Este texto está justificado. Algumas pessoas o 
classificam como alinhado à direita e à esquerda 
e algumas como blocado. As linhas de texto 
ficam alinhadas dos dois lados. Só utilize este 
alinhamento se as suas linhas puderem ter uma 
largura tal que evite a formação de "vazios" 
horríveis entre as palavras. 
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Às vezes é possível utilizar os alinhamentos à direita e à esquerda na 
mesma página, mas é importante que você se certifique de alinhar os 
elementos de alguma maneira. 


► 

Neste exemplo, o título e o 
subtítulo estão alinhados à 
esquerda, mas a descrição 
está centralizada; não existe 
um alinhamento em comum 
entre os dois elementos de 
texto. Eles não estão 
conectados entre si. 


► 

Apesar de esses dois elementos 
permanecerem com dois 
alinhamentos diferentes 
(o texto de cima está 
alinhado à esquerda e o 
de baixo, à direita), a lateral 
do texto descritivo de baixo 
está alinhada com a lateral 
direita do título de cima, 
conectando os elementos 
através de uma linha invisível. 
Isto não foi feito por acaso! 


Robert Burns 

Poemas em 
escocês e inglês 


A mais 

completa edição 
do maior poeta 
líricoda Escócia. 


Robert Burns 

Poemas em 
escocês e inglês 

A mais 


completa edição 
do maior poeta 
lírico da Escócia. 
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Quando colocar outros itens na página, é importante que cada um deles 
tenha um alinhamento visual com outro item da página. Se as linhas de 
texto estiverem horizontais, alinhe suas linhas de base. Se houver vários 
blocos de texto separados, alinhe suas laterais direitas ou esquerdas. Se 
houver figuras, alinhe suas laterais com outras laterais existentes na página. 
Nada deve ser posicionado arbitrariamente na página! 


Exemplo 6: Ualor de um resistor em um circuito elétrico. 

Descubra o valor de um resistor em um circuito elétrico que dissipará a carga a 1 % de seu 
valor original, em 1 /20 de segundo após o interruptor ser desligado. 


i lnterruptor-> 

H 


'i 

1 

1 1 1 

'Bateria CapacitorlC] 

! 

1 

Indutor (L) 

1 

i 

1 

-1 

[RI 


í q0= 

9 uolts 

ql»] = 

0.09 uolts 

t = 

0.05 segundos j 

L = 

8 henrys 

C= 

0.0001 

farads ? 

R= 

300 

ohms 5 







q[tl= \ 

0.255889 

; 



í 1/(L*C) 

1 250 

1 (R /(2*l))-2 

351.5625 

5 S0RTIB 15-B 16) 

29.973947 

5 COS(T»B 17) 

0.07203653 

i-R *T/(2*L) 

-0.9375 

j Q0*EXP(B 19) 

3.52445069 


▲ Mesmo que esta seja uma planilha bastante comum e sem 

atrativos, não há motivos para não fazer com que a página fique 
com uma aparência melhor e apresentar as informações com o 
máximo de clareza possível. Neste caso há dois problemas, certo? 
Falta de proximidade e falta de alinhamento. 
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Provavelmente a falta de alinhamento seja a maior causa de materiais 
com uma aparência antiestética. Seus olhos gostam de ver tudo em ordem, 
pois isso cria uma sensação de calma e segurança. 

Em qualquer material com um bom design é possível desenhar linhas 
sobre os objetos alinhados, mesmo que a apresentação do material seja 
composta por itens muito diferentes. 


Exemplo 6: Ualor de um resistor em um circuito elétrico. 


Descubra o valor de um resistor em um circuito elétrico que dissipará a carga a 1 % de sei| 
valor origina!, em 1/20 de segundo após o interruptor ser desligado. 



S l/(L*C) 

1 250 jj 

í (R /(2*L))-2 

351.5625} 

8 SQRKB 15-B 

6) 29.973947* 

C0S(T*B 17) 

0.07203653 S 

-R *T/(2*L) 

-0.9375 C 

Q0*EKP(B19) 

3.52445064 £ 


A Neste caso, o simples alinhamento dos itens muda tudo. Observe 
que nenhum item está colocado arbitrariamente na página; todo 
item tem alguma conexão visual com outro. 

Se eu soubesse do que trata essa planilha, talvez optasse por 
passar o item quadrado da direita para a esquerda, aproximando-o 
da planilha maior, mantendo suas partes superiores alinhadas, e não 
me preocuparia em alinhar a tabela quadrada à lateral direita. Se 
eu fizesse tudo assim, ajustaria o espaçamento entre as três 
planilhas, segundo suas interligações lógicas. 
























□ design para quem não é designer 


Um inconveniente com os materiais criados por pessoas que não conhecem 
design é a sutil falta de alinhamento, como títulos centralizados e subtítulos 
com parágrafos de endentação. A primeira vista, qual dos exemplos destas 
duas páginas têm um visual mais limpo e preciso? 


Honor Form 

Lorem ipsum dolor sit 
amet. consectetuer elit, sed 
diam nonummy nibh dolore 
magna aliquam erat volutpat. 

Violate lift wetter fodder, 
oilcd Former Huskings, hoe 
hatter repetition for bang 
furry retch-an furry stenchy. 
Infect, pimple orphan set debt 
Violate's fodder worse nosing 
button oiled mouser, Violate, 
honor udder hen. worsted 
furry gnats parson—jester 
putty ladle form gull, sample, 
morticed, an unafflicted. 

Tarred gull 

Wan moaning Former 
Huskings nudist haze dodder 
setting honor cheer, during 
nosing. 

'Violate!" sorted dole 
former. "Watcher setting darn 
fur? Denture nor yore canned 
gat retch setting darn during 
nosing? Germ pup otter debt 
cheer!' 

"Arm tarred. Fodder,' 
resplendent Violate warily. 


“Watcher tarred fur?" 
aster stenchy former. hoe dint 
half mush symphony further 
gull. 

Feeder pegs 

'Are badger dint doe 
mush woke disk moaning! 
Ditcher curry doze buckles 
fuller slob darn tutor peg-pan 
an feeder pegs?" 

'Yap, Fodder. Are fetter 
pegs' 



'Ditcher mail-car caws 
an swoop otter caw staple?" 
‘Off curse, Fodder. Are mulet 
oiler caws an swapped otter 
staple, fetter checkings. an 
clammed upper larder inner 
checking-horse toe gadder 


A Esta é uma diagramação muito comum; os 
títulos estão centralizados, o texto está alinhado à 
esquerda, as endentações de parágrafos têm a 
largura das da máquina de escrever (ou seja, 
cinco espaços ou meia polegada, como se 
aprende nos cursos de datilografia) e a foto está 
centralizada em uma das colunas. 

► Nunca centralize os títulos se o texto for alinhado 
à esquerda ou se ele tiver endentações. Se o 
texto não tiver laterais à esquerda e à direita 
bem-delimitadas, não é possível observar se o 
título está realmente centralizado. A sensação é 
de que ele está solto. 

Todos estes pontos desalinhados criam uma 
página desorganizada: endentações muito 
grandes, laterais irregulares de texto, títulos 
centralizados com espaços em branco dos dois 
lados, foto centralizada. 
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Estes pequenos desalinhamentos contribuem para que a página fique 
visualmente desorganizada. Encontre uma linha e guie-se através dela. 
Mesmo que a diferença seja sutil e seu chefe não consiga dizer qual é a 
diferença entre o exemplo a seguir e o anterior, a estética mais sofisticada 
é obviamente a melhor. 


Honor Form 

Lorem ipsum dolor sit amet, 
consectetuer elit, sed diam 
nonummy nibh dolore magna 
aliquam erat volutpat. 

Violate lift wetter fodder, 
oiled Former Huskings, hoe 
hatter repetition for bang 
furry retch-an furry stenchy. 
Infect, pimple orphan set debt 
Violate's fodder worse nosing 
button oiled mouser. Violate, 
honor udder hen, worsted 
furry gnats parson—jester 
putty Iadle form gull, sample, 
morticed, an unafflicted. 

Tarred gull 

Wan moaning Former 
Huskings nudist haze dodder 
setting honor cheer, during 
nosing. 

"Violate!" sorted dole 
former. "Watcher setting darn 
fur? Denture nor yore canned 
gat retch setting darn during 
nosing? Germ pup otter debt 
cheer!" 

"Arm tarred, Fodder,' 
resplendent Violate warily. 


"Watcher tarred fur?" aster 
stenchy former, hoe dint half 
mush symphony further gull. 

Feeder pegs 

"Are badger dint doe mush 
woke disk moaning! Ditcher 
curry doze buckles fuller slob 
darn tutor peg-pan an feeder 
pegs?" 

"Yap, Fodder. Are fetter 
pegs." 



"Ditcher mail-car caws an 
swoop otter caw staple?' "Off 
curse, Fodder. Are mulct oiler 
caws an swapped otter staple, 
fetter checkings, an clammed 
upper larder inner checking- 
horse toe gadder oiler aches, 
an wen darn tutor vestibule 
guarding two peck oiler bogs 


▲ Encontre um alinhamento e use-o como guia. Se 
o texto for alinhado ã esquerda, deixe os títulos e 
subtítulos alinhados à esquerda. 

Os primeiros parágrafos costumam ser 
deixados sem endentação. O objetivo de 
endentar um parágrafo é o de indicar o início 
de um novo parágrafo, mas sempre se sabe 
que o primeiro também é um parágrafo. 

Em uma máquina de escrever; a endentação 
comum é de cinco espaços. No caso das letras 
proporcionais utilizadas no computador, a 
endentação tipográfica padrão é a de um eme 
(um eme é tão largo quanto o tamanho da sua 
letra), que mais se assemelha a dois espaços. 

Preste atenção ao contorno irregular da sua 
letra. Ajuste as linhas de maneira que a lateral 
direita fique o mais suave possível. 

Se houver fotos ou ilustrações, alinhe-as com 
uma das laterais e/ou com a linha de base. 





DESIGN PARA QUEjM NÃO É DESIGNER 


Mesmo em um material que tenha uma abertura bem-diagramada e um 
bom design, uma sutil inexistência de alinhamento costuma ser o problema- 
chave para a falta de estética mais profissional. 



Quis noetrud exerci tation ull amcorper. 


por H. Chace 


AJorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Utwisi enim ad minim veniam, quis no&trud 
exerci tation ull amcorper suscipit. 

Duis autem vel eu m iriure dolor in h endrerit in 
vulputate velit esse molestie consequat, ve\ illum 
Colore cu feugiat nulla facilisis at vero eros> et 
accumsan ct iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dobre 
tefeugait nulla facilisi. Lorcm ipsum dobr sit amet, 
consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat 

“Duis autem vel” eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui blandit. 

“Wail, wail. wail!" set disk wicket woof, “Evanes- 
cent Ladle Rat Rotten Hut! Wares are putty ladle 
gu\\ goring wizard ladle basking?" 

“Armor goring tumor groin-murders," reprisal 
ladle gull. “Grammar s seeking bet. Armor ticking 
ar&on burden barteran shirker cockles." 

“Nam liber tempor cum soluta nobis eleifend 
option congue nihil imperdiet doming id quod mazim 
placerat facer possim assum. Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit!" 

Utwisienim ad minim veniam, quis nostrud exerci 
tation ull amcorper suscipit lobortis nisl ut aliquip 
ex ea commodo consequat. Duis autem vel eum 
iriure dolor in hendrerit in vulputate velit honor 


dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim e^ui blandit 
praesent luptatum zzril delenit augue duis dolore 
te feugait nulla facilis. 

Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit. 

“Ut wisi enim ad minim veniam, quis nostrud 
exerci tation ull amcorper suscipit lobortis nis!" 

“Battered lucky chew whiff, sweat hard," setter 
Woat-Thursday woof, wetter wicket small honors 
phase. 

“Ut wisi enim ad minim veniam, quis nostrud 
exerci adipiscing!” 

“Lorem ipsum dolor sit amet", consectetuer 
adipiscing elit. 

“Ut wisi enim ad minim veniam, quis nostrud 
exerci tation ull amcorper suscipit!” 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat 
volutpat. 


—H. Chace 
Anguish Languish 



ural: Autem vel eum iriure dolor 
in hendrerit in vulputate velit 
esse molestie consequat. vel. 


▲ Você consegue visualizar todos os lugares nos quais os itens 
poderiam estar alinhados mas não estão? Se este livro for 
seu, marque todas as incidências de falta de alinhamento 
desta página. Há pelo menos nove! 













3 DESIGN 


ALINHAMENTO f£] 


Preste atenção no caso de ilustrações que ficam um pouco desalinhadas 
para fora da margem, de legendas que estiverem centralizadas sob as 
fotos, de títulos que não estiverem alinhados com o texto, ou de uma 
combinação de texto centralizado com texto alinhado à esquerda. 



Quis noetrud exerci tation ulla mcorper. 


Adi orem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet Colore magna aliquam erat 
volutpat. Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ull amcorper suscipit. 

Puis a utem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eroe et 
accumean et iust o odio dignissim qui blandit 
praesentluptatumzzrildelenitaugueduisdolore 
te feugait nulla facilisi. Lorem ipsum dolor sit 
amet. consectetuer adipiscing elit. sed diam 
nonummy nibh euismod tincidunt ut laoreet dobre 
magna aliquam erat volutpat 

“Puis autem vel” eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel 
illumdolore eu feugiat nulla facilisis at vero eros 
et accumsan et iusto odiodignissim qui blandit. 

“Wall, wail, wail!” setdisk wicketwoof, “Evanes- 
cent LadleRatRotten HutlWaresareputtyladle 
gull goring wizard ladle basking?” 

“Armor goring tumor groin-murder’s," reprisal 
ladle gull. "Grammars seeking bet. Armor ticking 
arson burden barter an shirker cockles." 

“Nam liber tempor cum soluta nobis eleifend 
option congue nihil imperdiet doming id quod 
mazim placerat facer possim assum. Lorem 
ipsum dolor sit amet, consectetuer adipiscing 
elit!” 

Ut wisi enim ad minim veniam, quis nostrud 
exerci tation uWamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis a utem vel 
eum iriure dolor in hendrerit in vulputate velit 
honor dolore eu feugiat nulla facilisis at vero eros 
et accumsan et iusto odio dignissim qui blandit 


por H. Chace 


prae&ent luptatum zzril delenit augue duis dolore 
te feugait nulla facilis, 

Puis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum 
dolore eu feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit. 

“Ut wisi enim ad minim veniam, quis nostrud 
exerci tation ull amcorper suscipit lobortis nisl” 

“Battered lucky chewwhiff, sweat hard,”setter 
bloat-Thursday woof, wetter wicket small honors 
phase. 

“Ut wisi enim ad minim veniam, quis nostrud 
exerci adipiscing!” 

“Lorem ipsum dolor sit amet”, consectetuer 
adipiscing elit. 

“Ut wisi enim ad minim veniam, quis nostrud 
exerci tation uUamcorper suscipit!” 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat 
volutpat. 

—H. Chace 
Anguish Languish 


ural: Autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat, vel. 




▲ Você consegue ver o que mudou, comparando este exemplo e 
o da página anterior? Se este livro for seu, desenhe linhas 
paralelas ao alinhamento. 








□ DESIGN PARA QUEM NÃO É DESIGNER 


Repito: encontre uma linha-guia e utilize-a. Se você tiver uma foto ou 
uma imagem com uma lateral mais marcante, alinhe esta lateral do texto 
com a margem reta da foto, como mostra o exemplo abaixo. 


Lorem Ipsum 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip 
ex ea commodo consequat. 

Lorem ipsum dolor furry gourd-murder 
whiskered. “Watcher crane aboard?” 



▲ Existe uma linha-guia muito boa abaixo do texto. Existe uma 
linha-guia muito boa na margem da fotografia. Porém, entre o 
texto e a foto, existe um espaço em branco distribuído, só que 
com uma forma estranha. Quando o espaço em branco está 
com essa forma, ele separa os dois elementos. 


Lorem Ipsum 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip 
ex ea commodo consequat. 

Lorem ipsum dolor furry gourd-murder 
whiskered'.'Watcher crane aboard.'” 

▲ “Encontre uma linha-guia e utilize-a.” Agora a linha-guia do 
texto e a da foto estão próximas entre si, fortalecendo-se. O 
espaço em branco flutua livremente pela margem esquerda. A 
legenda também foi colocada contra a mesma linha-guia da 
margem da foto. 




3 DESIGN 


ALINHAMENTO Q 


Se os seus alinhamentos estiverem bem-delimitados, você poderá interromper 
conscientemente os alinhamentos e esta interrupção terá uma aparência 
intencional. Que conceito! 


Lorem Ipsum Amet Dolor Guíl 


Lorem ipsum dolor sit amet. 
consectetuer adipisdng clit, sed 
diam nonummy nibh euismod 
tincidunt ut laoreet dolore 
magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam. 
quis nostrud exerci tation 
ullamcorper susdpit lobortis nisl 
ut aliquip ex ea commodo . 

t wisi enim ad 

Pcbt líokiftf hiUfk tOC :;nim veníam. 

ÒeHtUMi (uh-I) UÒU íjutl. uisnostradexcrd 
ion ullamcorper 


lobortis nisl ut aliquip ex ea 
consequat. Duis autem vd cum 
iriurc dolor!' 

'Duis autem vel eum iriurc dolor 
in hendrerit in vulputate velit 
esse molestie consequat vel illum 
dolore cu feugiat nulla facilisis 
at vero eros et ulputate accum 
san et iusto odio dignissim qui 
blandit praesent luptatum zzril 
delenit auguc duis dolore te 
feugait nulla facilisi. Lorem 
ipsum dolor sit amet!" 

Lorem ipsum dolor 

Wail, pimple oil-wares wander 
doe wart udder pimple dun 
wampum toe doe. Debt s jest 


hormone nurture Wan moan- 
ing. Guilty Looks dissipater 
murder. an win entity florist. 
Fur lung, disk avengeress gull 
wetter putty yowlcr coils cam 
tore morticed ladle cordage in- 
hibited buyer hull firmly off 
becrs-Fodder Beer (home 
pimple. fur oblivious raisins. 
coilcd ‘Brewing’), Murder Beer. 
and Ladle Bore Beer Disk moan- 
ing. oiler beers hat jest lifter 
cordage, ticking ladle baskings. 
an hat gun entity florist toe peck 
block-barriers an rash-barri- 
ers. Guilty Looks ranker dough 
bali; bought, off curse, nor- 
bavvdy worse hum, soda sully 
ladle gull win baldly rat entity 
beer's horse! 

ipsum dolor ea 

Honor tipple inner darning 
rum, stud tree boils fuller sop- 
wan grade bag boiler sop, wan 
muddle-sash boü, an wan tawny 
ladle boil. Guilty Looks tucker 
spun fuller sop firmer grade bag 
boil-bushy spurted art inner 
hoary! 


▲ Bem... eu tentei não alinhá-lo, mas sou 
extremamente “programada”. Mesmo 
com o texto de interrupção invadindo 
o bloco de texto, você consegue ver o 
alinhamento à esquerda? Às vezes é 
possível fazer uma quebra completamente 
livre de alinhamento, se você a fizer de 
maneira consciente. 

► Estou transmitindo várias regras, mas as 
regras foram feitas para serem 
descumpridas. Porém há uma regra 
sobre o descumprimento de regras: 
antes de descumprir uma regra, 
é preciso conhecê-la. 





E3 DESIGN PARA QUEM NÃO É DESIGNER 



Nada deveria ser colocado arbitrariamente em uma página. Cada elemento 
deveria ter alguma conexão visual com outro elemento da página. 


A unidade é um conceito muito importante no design. Para que todos os 
elementos da página tenham uma estética unificada, conectada e inter- 
relacionada, é preciso que haja "amarras" visuais entre os elementos separados. 
Mesmo que eles não estejam próximos fisicamente na página, podem 
parecer conectados, relacionados, unificados a outras informações simplesmente 
devido ao seu posicionamento. Dê uma olhada nas diagramações que o 
agradam. Não importa se a aparência inicial da página seja caótica e 
selvagem: você sempre encontrará os alinhamentos correspondentes. 

0 propósito básico _ 

O propósito básico do alinhamento é o de unificar e organizar a página. 
O resultado é um pouco similar ao que acontece quando pegamos todos 
os brinquedos de um bebê que estavam espalhados pelo chão da sala e 
os colocamos em‘uma caixa de brinquedos. 

Normalmente é um alinhamento marcante (combinado, é claro, com a 
fonte apropriada) que cria uma aparência sofisticada, formal, engraçada 
ou séria. 

Como atingir este objetivo _ 

Esteja consciente do posicionamento dos elementos na página. Encontre 
sempre algo a mais na página para fazer o alinhamento, mesmo que os 
dois objetos estejam fisicamente distantes. 

0 que evitar _ 

Evite usar mais de um alinhamento de texto por página (ou seja, não 
centralize um texto e alinhe outro à direita). 

Por favor, evite, com todas as suas forças, o alinhamento centralizado, a 
não ser que você tenha o objetivo consciente de criar uma apresentação 
formal, pacata (que costuma ser comum demais). Escolha o alinhamento 
centralizado conscientemente e não por automação. 






m 


Repetição 


O princípio da repetição afirma que algum aspecto do design deve repetir- 
se no matçrial inteiro. O elemento repetitivo pode ser uma fonte em bold 
(negrito), um fio (linha) grosso, algum sinal de tópico, um elemento do 
design, algum formato específico, relações espaciais etc. Pode ser qualquer 
item que o leitor reconheça visualmente. 

Você já utiliza a repetição no seu trabalho: quando cria títulos com mesmo 
tamanho e mesmo peso, quando coloca um fio a meia polegada do final 
de cada página, quando usa o mesmo sinal de tópico em cada listagem 
referente ao mesmo trabalho. Estes são todos exemplos de repetição. O 
que os iniciantes precisam fazer é ir mais além, seguindo esta mesma 
idéia, ou seja, precisam transformar a repetição imperceptível em um 
elemento-chave visual que unifica o material. 

A repetição pode ser considerada como "consistência". Ao olhar para um 
newsletter (jornal) de oito páginas, é justamente a repetição de alguns 
elementos — sua consistência — que faz com que cada uma dessas oito 
páginas pareça pertencer ao mesmo newsletter. Se a página 7 não contiver 
elementos repetitivos trazidos da página 6, o newsletter inteiro perderá 
sua aparência coesa. 

Porém, a repetição vai além da simples consistência: é um esforço consciente 
para unificar todos os elementos do design. 





EI DESIGN PARA QUEM NÃO É DESIGNER 


Aqui está o mesmo cartão de visitas com o qual trabalhamos anteriormente. 
No segundo exemplo acrescentei um elemento repetitivo: a fonte forte 
em bold (negrito). Dê uma olhada nele e observe para onde seus olhos se 
movem. Depois de ler o número telefônico, o que você lê? Você volta ao 
outro tipo em bold do início do texto? Este é um truque visual que os 
designers sempre utilizam para controlar o fluxo do olho dos leitores, 
para manter sua atenção sobre a página o máximo de tempo possível. 


Toad Hall 

Reilly Pickett 


916 Old River Road 
Red River, NM 
(717)555-1212 


-4 Ao atingir o final das 
informações, seu olho 
fica vagando pelo 
cartão? 


Toad Hall 

Reilly Pickett 


916 Old River Road 
Red River, NM 

( 717 ) 555-1212 


A Agora, ao atingir o 
final das informações, 
para onde seu olho é 
direcionado? Ele fica 
oscilando entre os 
elementos em bold? 




4 DESIGN 


REPETIÇÃO E9 


Aproveite os elementos que você já estiver utilizando para fazer com que 
um projeto fique consistente transformando esses elementos em símbolos 
gráficos repetitivos. Todos os títulos do seu newsletter estão na fonte 
Times, com 14 pontos? O que você acha de arriscar, usando uma fonte 
em bold, sem serifa, como, por exemplo, a Antique Olive Black, com 16 
pontos? Além de sua página ficar mais interessante visualmente, você 
ampliará a organização visual e a consistência, deixando-a mais óbvia. 
Você estará reaplicando a repetição que já foi montada no projeto e 
ampliando-a, de maneira que este projeto ficará mais forte e dinâmico. 


Lorem Ipsum 

Lorem ipsum dolor sit amei 
consectetuer adipisdng elit. 

Ut wisi enim ad minim 
veniam, quis nostrud exerci 
tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea 
commodo consequat. Duis 
vclit cssc molcstic consequat. 
vel illum dolore eu feugiat 
nulla factlisis. 

‘Ut wisi enim ad minim 
veniam. quis nostrud exerci 
tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea 
commodo!" 

Lorem nut? 

‘Duis autem vel eum iriure 
dolor in hendrerit in vulputate 
velit esse molest. 

“Cause dorsal lodge an 
wicket beer inner florist hoe 
Otphan molasses pimple. Ladle 
gulls shut kipper ware firm 


debt candor ammonol, an 
stare otter debt florist! Debt 
florisTs mush toe dentures 
furry ladle gull!" 

Hormone nurture 

Wail, pimple oil-wares wan- 
der doe wart udder pimple 
dun wampum toe doe. Dcbt's 
jest hormone nurture. Wan 
moaning, Guilty Looks dis- 
sipater murder. an win 
entily florist. 


Fur lung disk avengeress gull 
wetnsim qui blandit praesent 
luptatum zzril delenit augue 
duis dolore te feugait nulla 
facilind Ladle Bore Beer. Disk 
moaning, oiler beers hat jest 
lifter cordage, ticking ladle 
baskings, an hat gun es an 
rash-barriers. Soda sully ladle 
gull win baldly rat entity 
beer s horse! 


Dolore sit ahict 


Lorem ipsu 

Lorem ipsum dolor sit amet, 
consectetuer adipisdng elit. 
Ut wisi enim ad minim 
veniam, quis nostrud exerd 
tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea 
commodo consequat. Duis 
velit esse molestic consequat 
vel illum dolore eu feugiat 
nulla facilisis. 

*Ut wisi enim ad minim 
veniam. quis nostrud exerci 
tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea 
commodo!” 

Lorem nut? 

‘Duis autem vel eum iriure 
dolor in hendrerit in vulputate 
velit esse molest. 

"Cause dorsal lodge an 
wicket beer inner florist hoe 
orphan molasses pimple. Ladle 
gulls shut kipper ware Firm 


debt candor ammonol, an 
stare otter debt florist! Debt 
florist's mush toe dentures 
furry ladle gull!' 

Hormone nurture 

Wail. pimple oil-wares wan- 
der doe wart udder pimple 
dun wampum toe doe. Dobfs 
jest hormone nurture Wan 
moaning, Guilty Looks dis- 
sipater murder, an win 
entity florist. 

Dolore sit nhiet 

Fur lung, disk avengeress gull 
wetnsim qui blandit praesent 
luptatum zzril delenit augue 
duis dolore te feugait nulla 
facilind Ladle Bore Beer. Disk 
moaning, oiler beers hat jest 
lifter cordage. ticking ladle 
baskings, an hat gun es an 
rash-barriers. Soda sully ladle 
gull win baldly rat entity 
beer"s horse! 


▲ Os títulos e subtítulos são um ▲ Escolha um elemento 
ótimo lugar para se começar consistente e reforce-o. 

a criar elementos repetitivos, 
já que, provavelmente, você 
tem de manter a consistência 
com eles. 







EJ DESIGN PARA QUEM NÃO É DESIGNER 


Você costuma criar publicações com muitas páginas? A repetição é um 
fator de grande importância na unidade dessas páginas. Quando os leitores 
abrirem o material, deverá ser imediatamente óbvio que as páginas 7 e 
12 fazem parte da mesma publicação. As duas páginas apresentadas a 
seguir são parte de uma publicação. Você seria capaz de apontar todos 
os elementos de.repetição? 


► 

Fio duplo 
consistente 
em todas as 
páginas. 


► 

Fonte 
consistente 
nos títulos e 
nos subtítulos 
e espaços 
consistentes 
entre eles. 


O fio único se 
repete na 
parte inferior 
de cada 
página. 

► 

Os números 
das páginas 
estão no 
mesmo lugar 
e na mesma 
fonte em 
todas as 
páginas. 


Honorde Forma 

Lorem ipsum dolor amet forme 
dodder, Violate Huskings, an wart 
hoppings dam honor form. 

Ut wisi enim ad minim veniam, 
quis nostrud exerci tation hoe 
hatter repetition for bang furry. 
Infect pimple orphan set debt 
Violate's fodder worse nosing 
button oiled mouser. Violate, 
honor udder hen, worsted furry 
gnats parson-jester putty ladle 
form gull, sample, morticed, an 
unafílicted. 

Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse 
molestie consequat. 

Sinfonia iriure 

"Violate!" sorte dole former, 

"Watcher setting darn fur? Yore 
canned gat retch setting dam during 
nosing? Germ pup otter debt cheer!" 

“Arm tarred, Fodder." resplen- 
dent Violate warily. 

Watcher tarred fur?" aster 
stenchy former, hoe dint half mush 
symphony further gull. "Are badger 
dint doe mush woke disk moan- 
ing! Ditcher curry doze buckles 
fuller slob dam tutor peg-pan an 
feeder pegs?" 



► Ul wisi quis cral volutpa. 


Vestibule guardings 

"Yap, Fodder. Are fetter pegs." 

"Ditcher mail-car caws an swoop 
otter caw staple?" "Off airse, Fodder. 
Are mulct oiler caws an swapped 
otter staple, fetter checkings, an 
clammed upper larder inner check- 
ing-horse toe gadder oiler aches, an 
wen darn tutor vestibule guarding 
toe peck oiler bogs an warms offer 
vestibules, an watched an earned 
yore dosing, an fetter hearses an .. “ 
"Ditcher warder oiler hearses, toe?" 
enter-ruptured oiled Huskings. 

"Nor, Fodder, are dint." 

"Dint warder mar hearses? 

Wire nut?" 


4 


▲ O texto tem um ponto de “alinhamento 
final”, mas nem todos os textos devem, 
necessariamente, alinhar-se neste ponto 
se houver um ponto inicial consistente e 
repetitivo na parte superior ala página. 

Em algumas publicações, pode-se optar 
pela repetição na parte inferior das páginas, 
e não pelo alinhamento a partir da parte 
superior da página. Mas qualquer uma 
dessas técnicas deve criar a consistência. 



4 DESIGN 


REPETIÇÃO E9 


Se você estiver trabalhando com um material forte, consistente, poderá 
utilizar alguns elementos-surpresa. Sugestão: guarde essas surpresas 
para o uso em itens sobre os quais você queira atrair muito a atenção 
do leitor. 

Você conseguiria apontar os elementos consistentes, repetitivos deste livro? 



Evanescent molestie consequat 

"Fodyore dolore magna aliquam erat volutpat. Yore kin leader hearse toe 
warder, Fodder, butcher cannon maggot drank. Lessen!" 

"Lorem ipsum dolor sit amet, consectetuer adipisdng elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat.” 

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
suscipit lobortís nisl ut aliquip ex ea commodo consequat. 


Elite dolor 

Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat. vel illum dolore 
eu feugiat nulla facilisis at vero eros 
et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril 
delenit augue duis dolore te feugait 
nulla facilisi. Lorem ipsum dolor sit 
amet, consectetuer adipisdng elit 
Wan gnat Hairy an Violate war 
setting honor Huskings' beck perch 
inner moan-late, holing hens. 


"Ipsum," crate Violate, 'Jest locket 
debt putty moan!” 

Arsenatic praesent 

▼ Snuff doze flagrant odors. 

▼ Moan-late an merry-age. 

▼ Odors firmer putty rat roadies 
inner floor guarding. 

▼ Denture half sum-sing imperti- 
nent toe asthma? 

Duis autem? 

Lorem ipsum dolor sit amet 
consectetuer nonunn. 


4 lodos os textos, 
fotos ou ilustrações 
começam na 
mesma linha-guia 
da parte superior 
de todas as páginas 
(veja também a 
observação abaixo, 
à esquerda). 


-^A coluna 
única, larga, 
ocupa o 
mesmo 
espaço de 
duas colunas, 
mantendo a 
consistência 
das bordas 
externas. 


▲ Observe o uso repetitivo da forma 
triangular na lista e na legenda da 
página anterior, apresentada como 
exemplo. É provável que este 
triângulo também seja utilizado 
em outros pontos da publicação. 
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Para criar uma boa papelaria (conjunto impresso de materiais de uma 
empresa ou pessoa, com logotipo e endereço) comercial, contendo cartão 
de visitas, papel de carta e envelope, utilize um elemento de repetição forte, 
não somente em cada peça, mas entre todas elas. Você deseja que o destinatário 
de sua carta saiba que você é a mesma pessoa que apresentou a ele, na 
semana anterior, um cartão de visitas. Crie um layout que permita alinhar 
a carta impressa com algum elemento de design da papelaria impressa. 





•4 Você pode 
notar que 
um texto 
digitado 
com um 
alinhamento 
sólido à 
esquerda 
causa uma 
forte 

impressão 

neste 

material. 


Route 9 
Box 16 
San Celato 
Arizona 
87776 
123 . 456.7890 
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Route 9 
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* 23 . 456.7890 






4 DESIGN REPETIÇÃO EH 


A repetição ajuda a organizar as informações. Ela ajuda a guiar o leitor 
pelas páginas e a unificar partes distintas do design (da diagramação) do 
material. Mesmo que o documento tenha apenas uma página, a repetição 
dos elementos estabelece uma continuidade sofisticada. Se você estiver 
criando vários documentos de uma única página que façam parte de um 
pacote unificado, é extremamente importante usar a repetição. 


► 

Repetições: 
Fonte bold 
Fonte light 

Sinais de tópico 
quadrados 

Endentações 

Espaçamento 

Alinhamentos 


Mickey Mouse 

■ Estúdios Walt Disney 
Anaheim, Califórnia 
53 anos, sem filhos 

Empregos 

■ Estúdios Walt Disney 

■ Diversos estúdios de televisão 

Educação 

■ Estúdios Walt Disney 

Atividades Preferidas 

■ Dirigir barcos a vapor 

■ Montar cavalos 

Frase Preferida 

■ Nem todos podem ser'-um pato. 


▲ Além dos elementos repetitivos 
bem-delimitados, que deixam bem 
claro exatamente o que está 
acontecendo neste caso, o Mickey 
também pode querer incorporar 
um ou mais desses elementos no 
design da sua carta de 
apresentação. 
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Se houver um elemento que o agrade, trabalhe com ele! Talvez seja um 
dip art ou uma fonte mais desenhada. Sinta-se livre para acrescentar um 
item completamente novo apenas para criar a repetição ou, ainda, escolha 
um simples elemento e utilize-o de várias maneiras: em diferentes tamanhos, 
cores ou ângulos. 

Às vezes os elementos repetidos não são exatammle os mesmos objetos, 
mas são tão interligados e relacionados que sua conexão se torna óbvia. 



◄ 


* 


Junte-se a 
a nós 

l s de maio, 
às 3 hs 
da tarde 

Use 

seu ^ 
chapéu 


► 


▲ A escolha e a repetição de um elemento de uma imagem são 
técnicas engraçadas e eficazes. Este pequeno símbolo triangular 
poderia ser aplicado em outros materiais pertencentes ao mesmo 
conjunto, como envelopes, cartões-resposta, balões etc., e todas as 
peças formariam uma unidade coesa, mesmo que não 
repetíssemos a xícara inteira. 
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Em geral podemos usar elementos repetitivos que nada têm a ver com o 
objetivo da página criada. Por exemplo, coloque alguns petróglifos ou alguns 
pássaros estranhos em um relatório. Escolha caracteres particularmente boni¬ 
tos da fonte que estiver utilizando e coloque-os em tamanhos maiores, em 
cinza ou em uma segunda cor mais luminosa. Apliqueis em vários ângulos 
no seu material. E ótimo divertir-se. M 



Grande venda 
de inauguração 

na 

PickWick Papem! 

pape Li 
envelopes 

carimboo de borracha 
purpurina 
adeoivoo difer enteo 



Fort Marcy Center • 6 9 -feira • 7 de Maio 



▲ Retirar um dos elementos de design dos 
limites da página unifica duas ou mais 
peças, o primeiro e o segundo plano, ou 
materiais separados com um tema em 
comum. Observe como o “pôster” e esta 
página parecem estar conectados devido 
à repetição dos caracteres primitivos. 
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Resumo 

A repetição de elementos visuais no design unifica e fortalece o material, 
agrupando partes que seriam separadas. O recurso da repetição é muito 
útil em peças de uma só página e é essencial em documentos de muitas 
páginas (neste caso, a repetição é considerada como consistência). 

0 propósito básico _ 

O propósito básico da repetição é unificar e acrescentar interesse visual. 
Não subestime o interesse visual de uma página: se ela for interessante, 
sua leitura será mais agradável e provavelmente mais lida. 

Como atingir este objetivo _ 

Considere a repetição como consistência; tenho certeza de que você já tem 
essa qualidade. Então, vá mais além utilizando a consistência existente: 
você poderia transformar alguns desses elementos consistentes em parte 
integrante do design gráfico consciente, como no exemplo do título? Você 
costuma usar um fio de 1 ponto na parte inferior das páginas ou sublinhar 
os títulos? O que você acha da idéia de utilizar um fio de 4 pontos no 
lugar do de 1 ponto, para que o elemento repetitivo fique mais marcante? 

Pense sobre a possibilidade de acrescentar elementos apenas para criar 
uma repetição. Você tem uma lista numerada de tópicos em seu mate¬ 
rial? O que você acha de usar uma fonte diferente, ou um número invertido, 
e, depois, repetir esse modelo em cada lista numerada que aparecer na 
mesma publicação? Em primeiro lugar, você deve encontrar as repetições 
que já existem e reforçá-las. Quando você se acostumar com essa idéia e 
com a estética, comece a criar repetições para aperfeiçoar o design e a 
clareza das informações. 

Repetir é como dar ênfase às suas roupas. Se uma mulher usar um maravilhoso 
vestido preto de noite com um chapéu preto chique, ela enfatizará sua roupa 
usando sapatos vermelhos, batom vermelho e um buquê vermelho no vestido. 

0 que evitar _ 

Evite repetir o elemento em demasia, para que ele não se torne enfadonho 
ou excessivo. Esteja consciente do valor do contraste (leia o próximo 
capítulo e a seção referente ao contraste dos tipos). 

Por exemplo, se uma mulher usasse um vestido de noite preto com um 
chapéu vermelho, brincos vermelhos, batom vermelho, sapatos vermelhos 
e um casaco vermelho, a repetição não criaria um contraste unificante e 
incrível: seria espalhafatoso e o foco ficaria confuso. 




Contraste 


O contraste é uma das maneiras mais eficazes de acrescentar algum atrativo 
visual a uma página (algo que realmente faça com que uma pessoa queira 
olhar para ela), criando uma hierarquia organizacional entre diferentes 
elementos. A "regra" importante que deve ser lembrada é a de que para o 
contraste ser realmente eficaz, ele deve ser forte. Não seja tímido. 

Cria-se o contraste quando dois elementos são diferentes. Se eles diferirem 
um pouco mas não muito, não acontecerá o contraste e sim um conflito. 
Este é o segredo: segundo o princípio do contraste, se dois itens não 
forem exatamente os mesmos, diferencie-os completamente. 

Podemos alcançar o contraste de várias maneiras. Uma letra grande pode 
ser contrastada com uma pequena; uma fonte em estilo antigo com uma 
fonte em bold sem serifa; um fio fino com um grosso; uma cor fria com 
uma mais quente; uma textura áspera com uma lisa; um elemento hori¬ 
zontal (por exemplo, uma longa linha de texto) com um elemento verti¬ 
cal (por exemplo, uma coluna estreita de texto); linhas muito espaçadas 
com linhas bem próximas; uma figura pequena com uma figura grande. 

Basta não ser tímido e ousar. Não se pode contrastar um fio de meio 
ponto com um de 1 ponto. Não se pode contrastar o marrom escuro 
com o preto. Faça direito. 




EI DESIGN para quem não é designer 


Se os dois "newsletters" apresentados a seguir aparecessem sobre sua 
mesa, qual deles você leria primeiro? Ambos têm o mesmo layout básico. 
Ambos são estéticos e simpáticos. Ambos contêm as mesmas informações. 
Na verdade, existe apenas uma diferença: o segundo tem mais contraste. 


OUTRO NEWSLETTER! 


I o de J a n e i 


Título Excitante 

Wants pawn term dare worsted ladle 
gull hoe hat search putty yowler coils 
de bt pimple colder Guilty Looks. Guilty 
Looks lift inner ladle cordage 
saturated adder shirt dissidence 
firmer \>ag florist, any ladle gull orphan 
aster mu rder toe letter gore entity 
florist oil buyer shelf. 

Subtítulo Arrepiante 

“Guilty Looks!" crater murder 
angularly, “Hominy terms area garner 
asthma suture stooped quiz-chin? 
Goiter door florist? Sordidly NUTT 

“Wire nut, murder?” wined Guilty 
Looks, hoe dint peony tension tore 
murder’s scaldings. 

“Cause dorsal I odge an wicket beer 
inner florist hoe orphan molasses 
pimple. Ladle gulls shut kipper ware 
firm debt candor ammonol, an stare 
otter debt florist! Debt florist’s mush 
toe dentures furr/ ladle gull!” 

Outro Título 
Excitante 

Wail. pimple oil-wares wander doe wart 
udder pimple dun wampum toe doe. 
Debt’s jest hormone nurture. Wan 


r o de 19 9 3 


moaning, Guilty Looks dissipater 
murder, an win entity florist. 

Fur lung, disk avengeress gull wetter 
putty yowler coils cam tore morticed 
ladle cordage inhibited buyer hull 
firmly off beers-Fodder Beer (home 
pimple, fur oblivious raisins. coiled 
“Brewing”), Murder Beer, and Ladle 
Bore Beer. Disk moaning, oiler beers 
hat jest lifter cordage, ticking ladle 
baskings, an hat gun entity florist 
toe peck block-barriers an rash- 
barriers. Guilty Looks ranker dough 
bali; bought, off curse, nor-bawdy 
worse hum, soda sully ladle gull win 
baldly rat entity beer’s horse! 

Um Subtítulo Comum 

Honor tipple inner darning rum, stud 
tree boils fuller sop-wan grade bag 
boiler sop, wan muddle-sash boil, an 
wan tawny ladle boil. Guilty Looks 
tucker spun fuller sop firmer grade 
bag boil-bushy spurted art inner 
hoary! “Arch,” crater gull, “Deb sop’s 
tpe hart-barns mar mouse!” 

Dingy traitor sop inner muddle-sash 
boil, witch worse to coiled. Butter 
sop inner tawny ladle boil worse jest 
rat, an Guilty Looks aided .oil lop. 
Dingy nudist tree cheers-wan 
anomalous cheer, wan muddle-sash 


I 


A Esta opção está boa, mas nada atrai seus 
olhos para o material. 
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A causa do contraste é óbvia. Utilizei uma fonte mais pesada e com mais 
negrito nos títulos e subtítulos. Repeti essa fonte (seguindo o princípio 
da repetição; lembra-se dele?) no título do newsletter. Quando mudei o 
título de caixa-alta para alta e baixa, pude utilizar um tamanho maior e 
aumentar o negrito, o que também ajuda a reforçar o contraste. E como 
agora os títulos têm tanto peso, foi possível acrescentar uma caixa preta 
na parte superior, atrás do título, repetindo novamente a cor escura e 
reforçando o contraste. 


Outro Newsletter! 


Título Excitante 

Wants pawn term dare worsted \ad\e 
gull h oe hat search putty yowler coils 
de bt pimple colder Guilty Looks. Guilty 
Looks lift i nner ladle cordage saturated 
adder shirt dissidence firmer b ag 
florist, any ladle gull orpban as ter 
murder toe letter gore en tity florist oil 
buyer shel f. 

Subtítulo Arrepiante 

“Guilty Looks!” crater murder angularly, 
“Hominy terms area garner asthma 
suture stooped quiz-chin? Goiter door 
florist? Bordidly NUT!” 

“Wire nut, murderT wired Guilty Looks, 
hoe dint peony tension tore murder s 
scaldings. 

“Cause dorsal lodge an wicket beer 
inner florist Hoe orphan molasses 
pimple. Ladle gulls shut kipper ware firm 
debt candor ammonol, an stare otter 
de\7t florist! Debt florist’s mush toe 
dentures furry ladle gull!” 

Outro Título 
Excitante 

Wail, pimple oil-wares wander doe wart 
udder pimple dun wampum toe doe. 
Debt’s jest h ormone nurture. Wan 
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moaning, Guilty Looks dissipater 
murder, an win entity florist. 

Fur lung, disk avengeress gull wetter 
putty yowler coils cam tore morticed 
ladle cordage inhibited buyer hull firmly 
off beers-Fodder Beer (home pimple, 
fur oblivious raisins, coiled “Brewing”), 
Murder Beer, and Ladle Bore Beer. 

Disk moaning, oiler beers hat jest 
lifter cordage. ticking ladle baskings, 
an hat gun entity florist toe peck 
block-barriers an rash-barriers. Guilty 
Looks ranker dough bali; bought, off 
curse, nor-bawdy worse hum, soda 
sully ladle gull win baldly rat entity 
beer’s horse! 

Um Subtítulo comum 

Honor tipple inner darning rum, stud 
tree boils fuller sop-wan grade bag 
boiler sop, wan muddle-sash boil, an 
wan tawny ladle boil. Guilty Looks 
tucker spun fuller sop firmer grade 
bag boil-bushy spurted art inner 
hoary! “Arch!" crater gull, “Debt sop’s 
toe hart-bams mar mouse!” 

Dingy traitor sop inner muddle-sash 
boil, witch worse toe coiled. Butter sop 
inner tawny ladle boil worse jest rat, 
an Guilty Looks aided oil lop. Dingy 
nudist tree cheers-wan anomalous 
cheer, wan muddle-sash 




▲ Você concorda que seus olhos se fixaram 
mais nesta página do que na anterior? 
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O contraste é um ponto critico na organização das informações; o leitor 
sempre deveria ser capaz de, à primeira passada de olhos sobre um ma¬ 
terial, compreender imediatamente o que ele representa. 


Laura Mathews 

1953 Knolls Drive 
Santa Rosa. Califórnia 95405 
(707) 987.1254 


Habilidades 

Excelentes conhecimentos em análise de exames clínicos, especialmente 
em tratamentos na área de oncologia. 

Especialista em analisar biópsias da medula óssea, e em aplicações de 
quimioterapia. Habilidade em acompanhar pacientes ao longo de seus 
tratamentos específicos. 

Formação acadêmica 

1990 Faculdade de Enfermagem da Universidade dc Santa Rosa, Santa 
Rosa, Califórnia. 

Experiência profissional 

1992 Enfermeira cadastrada na Health Home Plus, Divisão de Visitas. 
Cuidados a domicílio de pacientes com aids e câncer. 

1990 Enfermeira-chefe do Hospital Memorial, unidade de oncologia. 
Santa Rosa, Califórnia. Responsável pelo setor de quimioterapia. 

1985-1986 Enfermeira do Mendocino Coast District Hospital. Fort 
Bragg. Califórnia. 

1985-1986 Assistente de laboratório do Medocino Coast District 
Hospital. Fort Bragg Califórnia. 

Apresentação pessoal 

Minhas experiências anteriores só fizeram melhorar meu trabalho junto 
aos pacientes. Hoje sinto-me á vontade diante dos pacientes com câncer e 
de suas famílias. Meus supervisores sempre valorizaram minha capacidade 
organizacional, meu potencial de rápido aprendizado, minha coragem ao 
assumir novas responsabilidades e minha dedicação ao trabalho. 


▲ Este é um currículo típico. Iodas as informações 
estão ali, e se alguém quiser realmente lê-las, 
poderá fazê-lo. Porém, na verdade, este material 
não se destaca nem chama atenção. 

Observe os seguintes problemas: 

Há dois alinhamentos na página: o centralizado e o 
à esquerda. 

Os espaços entre os segmentos separados são 
parecidos demais. 

Os nome dos cursos complementares se fundem 
ao da instituição em que foram feitos. 
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Veja: além de a página ficar mais interessante com o uso do contraste, o 
propósito e a organização do trabalho estão mais claros. 


Laura Mathews 


1955 Knolls Drive 

Santa Rosa. Califórnia 95405 
(707) 987.1254 

Habilidades 


Excelentes conhecimentos em análise de exames clínicos, cspccialmente 
em tratamentos na área de oncologia. 


Especialista em analisar biópsias da medula óssea, e em aplicações 
de quimioterapia. Habilidade em acompanhar pacientes ao longo 
de seus tratamentos específicos. 

Formação acadêmica 

1990 

Faculdadede Enfermagem da Universidade de Santa Rosa, 

Santa Rosa, Califórnia. 

Experiência profissional 

1992 

Enfermeira cadastrada na Health Home Plus, Divisão de Visitas. 
Cuidados a domicílio de pacientes com aids c câncer. 

1990 

Enfermeira-chefe Jo Hospital Memorial, unidade de oncologia. 

Santa Rosa, Califórnia. Responsável pelo setor de quimioterapia. 

1985-1986 

Enfermeira do Mendotino Coast District Hospital, Fort Bragg Califórnia. 

1985-1986 

Assistente de laboratório do Mendocino Coast District Hos¬ 
pital. Fort Bragg, Califórnia. 

Apresentação pessoal 


Minhas experiências anteriores só fizeram melhorar meu trabalho 
junto aos pacientes. Hoje sinto-me à vontade diante dos pacientes 
com câncer e de suas famílias. Meus supervisores sempre valorizaram 
minha capacidade organizacional, meu potencial de rápido 
aprendizado, minha coragem ao assumir novas responsabilidades 
e minha dedicação ao trabalho. 


▲ Os problemas foram facilmente corrigidos. 

Um alinhamento à esquerda (na verdade, está justificado); 
dentro dele, mais um alinhamento à esquerda. Ambos são 
muito marcantes e reforçam um ao outro (alinhamento e 
repetição). 

Os títulos estão fortes. Sabemos de imediato o que este 
material contém e quais são seus pontos-chave (contraste). 

Os segmentos estão separados com mais espaço do que 
as informações dentro de cada segmento (contraste de 
relações espaciais; proximidade). 

Os títulos de graduação e de trabalhos estão em bold 
(uma repetição da fonte do título); o forte contraste faz 
com que eles sejam notados. 
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A maneira mais fácil de acrescentar contraste a um material para torná- 
lo interessante é trabalhar com as fontes (este é o tema principal abordado 
na segunda metade deste livro). Mas não se esqueça dos fios, do espaçamento 
entre os elementos, das texturas etc. 

Se você utilizar um fio fino (chamado de hairline) entre as colunas, uti¬ 
lize um fio mais forte de 2 ou 4 pontos quando precisar usar outro fio; 
não coloque um fio de meio ponto e um de 1 ponto na mesma página. Se 
você aplicar uma segunda cor para acentuar o trabalho, assegure-se de 
que as cores se contrastam: o marrom-escuro e o azul-escuro não contrastam 
eficientemente com o texto em preto. 


As Regras da Vida 

Sua atitude é sua vida. 


Maximize suas opções. 


Nunca leve nada a sério demais. 


Não deixe que as sementes o 
impeçam de apreciar a melancia. 

Seja legal. 


As Regras da Vida 

Sua atitude é sua vida. 


Maximize suas opções. 

Nunca leve nada a sério demais. 


Não deixe que as sementes o 
impeçam de apreciar a melancia. 

Seja legal. 


4 Neste caso, há um 
ótimo contraste entre 
as fontes, mas o 
contraste entre os fios 
(linhas) está confuso. 
Será que os fios 
deveriam ter duas 
espessuras diferentes? 


■4 Agora que foi 
estabelecida uma 
diferença maior entre 
as espessuras dos fios, 
não há risco de 
alguém achar que há 
um erro. O bloco 
inteiro ficou mais 
marcante e sofisticado; 
sabemos onde começa 
e onde termina. 
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Se você utilizar colunas altas e estreitas em seu newsletter, faça alguns 
títulos mais fortes para criar um direcionamento horizontal contrastante 
na página. 

Combine o contraste com a repetição, como na numeração das páginas, 
nos títulos, nos sinais de tópico ou na distribuição espacial, para criar 
uma identidade visual forte e unificada na publicação inteira. 


macintosh 


Novo/ órupo de 
Usuários Mac Santa fé 


O que é?!? 

A maioria das cidades 
. têm um Grupo de 
Usuários Mac. que 
fornece informações e 
suporte para qualquer 
pessoa que utilize um 
Macintosh, em qualquer 
área de atuação. Os 
encontros são mensais. 
Os grupos de suporte 
por áreas especializadas 
(còmo design, comércio 
ou aulas) também 
podem ser criados. 

Este é um lugar para 
partilhar experiências, 
encontrar respostas, 
manter-se em contato 
com um fluxo muito 
ágil de informações e 
divertir-se! 


Estou convidada? 

Sim! Qualquer pessoa 
que tenha algo a ver 
com computadores do 
tipo Macintosh está 
convidada a participar. 
Mesmo que você nunca 
tenha usado um Mac, 
está convidado, Mesmo 
que você nem tenha 
decidido se o Mac é ou 
não o melhor 
computador, está 
convidado. 

Posso levar um 
amigo? 

É claro que pode! Traga 
seus amigos, sua mãe, 
seu pai, seus vizinhos, 
seus filhos adolescentes! 
Você também pode 
trazer biscoitos! too! 


O que faremos lá? 

A cada mês haverá um 
palestrante da 
comunidade ou 
representante de 
hardware ou de 
software, ou, ainda, uma 
celebridade do Mac. 
Teremos sorteios, uma 
biblioteca de discos com 
uma ampla variedade de 
softwares, tempo para 
fazermos perguntas e 
para as respectivas 
respostas e 

camaradagens em geral. 

Se você trouxer 
biscoitos, comeremos 
biscoitos! 


Quando vai 
acontecer? 

Estávamos esperando 
por esta pergunta. Sim, 
já que este é o nosso 
primeiro encontro 
estaremos procurando 
por pessoas interessadas 
em envolver-se. 
Precisamos de muitas 
pessoas para mantermos 
um grupo de usuários 
viável e útil. Teremos 
uma lista de voluntários 
disponíveis, mas é 
melhor que você se 
apresente rapidamente; é 
tão divertido! Rt^lmente 
esperamos criar uma 
comunidade forte de 
usuários Macintosh. 


Quando vai 
acontecer? 

Nosso primeiro encontro 
acontecerá em 16 de 
março, das 19:00 às 20:45. 

Onde vai 
aconceter? 

Este encontro acontecerá 

na Biblioteca 
Municipal, na Sala da 
Comunidade. 

É preciso pagar? 

Ainda não. Cada grupo 
de usuários tem uma 
taxa anual de sócio para 
se sustentar. Os 
encontros podem custar, 
eventualmente, RS 2,00 
para os não-sócios. 
Então... apareça, 
enquanto é de graça! 


A Além do contraste existente entre as fontes deste cartão postal, 
também há um contraste entre o título horizontal (longo) e as 
colunas verticais (estreitas). As colunas estreitas são um elemento 
repetitivo e um contraste. 





El DESIGN PARA QUEM NÃO É DESIGNER 


O exemplo apresentado a seguir é um típico anúncio de lista telefônica. 
Um dos problemas é que basicamente tudo está do mesmo tamanho, com 
o mesmo peso e com a mesma atribuição de importância. Visualmente, o 
item "Membro da Associação de Intercâmbio de Construtores" está com o 
mesmo peso de-"Especialistas em Reformas e Consertos". Está correto? 

Estabeleça qual deve ser o item principal. Use contraste para criar este 
enfoque. Destaque-o com alinhamentos marcantes e aplique a proximidade. 


CONSTRUÇÕES 
EFICIENTES 

REFORMAS E CONSERTOS 
RESIDENCIAL E COMERCIAL 

* AMPLIAÇÕES * REFORMAS * 

* BANHEIROS * COZINHAS * COBERTURAS * 

* PEQUENOS SERVIÇOS * 

* SOLUÇÃO DE PROBLEMAS * 

★ PROJETOS PERSONALIZADOS * 

* CONSTRUÇÃO DE CONSULTÓRIOS MÉDICOS * 

SERVIÇO COMPLETO PARA CONSTRUÇÕES 
MEMBRO DA ASSOCIAÇÃO DE 
INTERCÂMBIO DE CONSTRUÇÃO 

717 - 567-8910 

ORÇAMENTO SEM 
COMPROMISSO 


▲ Por onde vo cê começaria a melhorar este anúncio? 

Coloque as letras em caixa-alta e baixa (maiusculas e minúsculas) e 
não todas em caixa-alta. 

Estabeleça conjuntos de informações e agrupe os itens (proximidade), 
deixando espaços entre os grupos para indicar suas relações. 

Organize todos esses elementos, dispondo-os em um alinhamento 
marcante. 

Elimine elementos conflitantes: 

O contorno do anúncio não é um ponto de foco principal; então, 
por que deixá-lo tão forte? 

As estrelas chamam muita atenção; dirija a atenção para o real 
objetivo do anúncio. 

Não há nada errado com cantos vazios; uma única águia já é 
suficiente! 
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Não tenha medo de diminuir alguns itens para criar um contraste com 
os elementos maiores e deixar espaços em branco. Quando você atrair a 
atenção do leitor para o ponto principal, se ele estiver realmente interessado 
lerá o texto em letras menores. Mas se ele não estiver interessado, não 
importa o tamanho que você colocar; ele não lerá. 

Observe que todos os outros princípios são aplicados: proximidade, 
alinhamento e repetição. Eles trabalham juntos para criar o efeito total. É 
raro ajustar apenas um dos princípios no design (na diagramação) de 
um material. 


Construções 
Eficientes 

Reformas e Consertos 
Residencial e Comercial 



Serviço Completo para Construções 

Projetos personalizados Reformas 

Coberturas Ampliações 

Banheiros Pequenos serviços 

Cozinhas 

Solução de problemas 
Construção de consultórios médicos 


Orçamento sem compromisso 

717 - 567-8910 

Membro da Associação de Intercâmbio de Construtores 


A Uma pessoa pode achar que este anúncio não 
reflete a personalidade do dono do negócio, como 
acontece no anúncio anterior Mas se este anúncio 
tem como finalidade atrair as pessoas que desejam 
gastar dinheiro, qual deles transmite ao interessado 
uma sensação mais profissional e segura? 

Observe também como e onde a repetição é 
aplicada. Já que este é um anúncio de lista 
telefônica, existe lógica na repetição da fonte em 
bold e corpo grande no número de telefone. 
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O contraste de uma página faz com que seus olhos se virem para ela. Se 
você colocar dois elementos diferentes em uma página (como duas fontes 
ou duas espessuras de fio), eles não devem ser similares. Para que o 
contraste cumpra totalmente suas funções, os dois elementos devem ser 
muito diferentes. 

Utilizar o princípio do contraste é como fazer o retoque em uma parede: 
não se pode combinar mais ou menos a cor; ou você encontra a cor 
exata ou precisará pintar a parede inteira. 

0 propósito básico _ 

O propósito básico do contraste é duplo, e seus dois objetivos são unificados. 
Um deles é criar interesse sobre uma página; se ela tiver uma aparência 
interessante, atrairá mais a leitura. O outro é auxiliar na organização das 
informações. O leitor deveria ser capaz de compreender instantaneamente 
a maneira através da qual as informações são estruturadas, o fluxo lógico 
de um item para outro. Os elementos contrastantes nunca deveriam confundir 
o leitor ou criar um foco que não seja o correto. 

Como atingir este objetivo 

Aplique contraste em suas opções de tipologia (leia a próxima seção), nas 
espessuras das linhas, nas cores, nas formas, nos tamanhos, nos espaços 
etc. É fácil descobrir maneiras de contrastar os itens e, provavelmente, 
esta é a maneira mais divertida e satisfatória de criar interesse visual. O 
importante é criar elementos marcantes. 

0 que evitar _ 

Não seja tímido. Se você criar contrastes, faça-os de maneira forte. Evite 
contrastar uma linha um pouco espessa com uma linha um pouco mais 
espessa. Evite contrastar um texto em marrom com títulos em preto. 
Evite usar duas ou mais fontes similares. Se os itens não forem exatamente 
iguais, diferencie-os! 






Revisão 


m 


Existe mais um princípio geral de Design (e da Vida também): 

Não seja tímido. 

Não tenha medo de criar seu próprio Design (ou sua própria Vida) com 
muitos espaços em branco: é um descanso para os olhos e para a alma. 
Não tenha medo de ser assimétrico, de descentralizar seu formato — às 
vezes isso faz com que o efeito seja mais marcante. É muito bom criar 
o inesperado. 

Não tenha medo de fazer com que as palavras fiquem muito grandes 
ou muito pequenas; não tenha medo de falar mais alto ou de sussurrar. 
Ambos podem ser eficazes, se utilizados no lugar certo. 

Não tenha medo de fazer suas imagens bem fortes ou mínimas, se o 
resultado complementar ou reforçar seu design ou sua atitude. 

As próximas páginas resumem os quatro princípios abordados na primeira 
metade deste livro. Vamos dar uma olhada nesta capa de relatório tão 
comum e aplicar cada um dos princípios. 


Tudo o Que 
Vai Volta 

Lições para viajar 
de carona pelo país 

Robin Williams 
l s de Janeiro de 2001 


■4 Uma capa de 
relatório comum 
(e sem criatividade): 
centralizada, com 
espaços iguais para 
preencher a página. 
Se você não 
soubesse ler em 
português, pensaria 
que são seis tópicos 
separados na 
página. Cada linha 
parece ser um 
elemento individual. 
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Proximidade 

Se os itens estiverem relacionados entre si, agrupe-os em proximidade. 
Separe-os, se eles não estiverem diretamente ligados. Varie o espaço entre 
os itens para indicar a proximidade ou a importância desta ligação. 


Tudo o Que 
Vai Volta 

Lições para viajar de 
carona pelo país 


Robin Williams 
l 2 de Janeiro de 2001 


◄ 

Aproximando o 
título e o subtítulo, 
criamos uma unidade 
bem-definida, 
no lugar de 
seis unidades 
segmentadas. 

Ficou nítido que os 
dois tópicos estão 
ligados entre si. 

Distanciando o nome 
do autor e a data, 
fica claro que apesar 
de estas informações 
serem relacionadas 
e possivelmente 
importantes, elas 
não fazem parte 
do título. 
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Alinhamento 

Fique atento quanto a cada elemento que você colocar na página. Para 
que a página inteira fique unificada, alinhe cada objeto com uma parte 
lateral de outro. Se os alinhamentos forem "fortes'' (bem-delimitados), 
você poderá optar por quebrar ocasionalmente um alinhamento, e esta 
modificação não parecerá um erro. 


► 

Mesmo que o nome do 
autor esteja distante do 
título, existe uma conexão 
visual entre os dois 
elementos, criada através 
do alinhamento. 

O exemplo anterior 
também está alinhado: o 
alinhamento é a 
centralização. Mas como 
você pode ver, um 
alinhamento à esquerda 
ou à diréita (como 
mostra este exemplo) 
cria uma lateral mais 
marcante, mais fácil de 
seguir com os olhos. 

O alinhamento à esquerda 
ou à direita também 
tende a criar uma 
estética mais sofisticada 
do que a centralização. 


Ttido o Que 
Vai Volta 

Lições para viajar de 
carona pelo país 


Robin Williams 
l s de Janeiro de 2001 
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A repetição é uma forma mais marcante de criar consistência em um 
material. Observe os elementos que você já repete (sinais de tópico, fontes, 
linhas, cores etc.); avalie se é apropriado fazer com que um desses elementos 
fique mais marcante e utilize-o como o elemento repetitivo. 



◄ 

A fonte diferenciada do 
título se repete no nome do 
autor; fortalecendo a 
conexão entre ambos, 
mesmo que estejam 
fisicamente distantes na 
diagramação da página. 

Os pequenos triângulos 
foram especialmente 
acrescentados para criar 
uma repetição. Apesar 
de cada um deles 
apontar para uma 
direção diferente, a forma 
triangular é suficientemente 
específica para ser 
reconhecida em todas as 
suas incidências na página. 

A “cor” dos triângulos 
também é um elemento que 
se repete. A repetição ajuda 
a unificar elementos 
separados do design 
(da diagramação). 



Você concorda com o fato de que o exemplo desta página atrai seus 
olhos muito mais do que o da página anterior? Neste caso, o responsável 
é o contraste do preto contra o branco. Há várias maneiras de criar 
contrastes: fios (linhas), fontes, cores, relações espaciais, direções etc. A 
segunda metade deste livro aborda especificamente o tópico do contraste 
através do trabalho com fontes. 


► 

O trabalho com o 
contraste neste material 
foi apenas o de 
acrescentar a caixa preta. 

Ralcei um pouco 
a letra colocando o 
subtítulo em itálico, 
contrastando-o com 
a letra normal (sem 
italização, chamada 
de roman) do título e 
do nome do autor 
(O título está na 
fonte Bodoni Pôster 
Compressed; o subtítulo 
está na Bodoni Italic.) 

Você conseguiria 
descrever onde estão 
sendo utilizados, 
neste exemplo, os 
princípios de proximidade, 
alinhamento e repetição? 





EU DESIGN PARA QUEM NÃO É DESIGNER 


Desafio n° 1: princípios de design _ 

Descubra pelo menos sete diferenças entre os dois modelos de currículos apresenta¬ 
dos a seguir. Circule cada uma das diferenças e determine o princípio de de¬ 
sign que essas diferenças contrariam. Expresse em palavras quais são as mudanças. 
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Desafio n° 2: rediagrame este anúncio _ 

Quais são os problemas deste anúncio de uma lista telefônica? Faça uma lista 
dos problemas e das soluções. 

Dicas: Quantas fontes diferentes foram usadas no anúncio? Quantos alinhamentos 
diferentes foram utilizados? O que poderia ser utilizado como uma linha 
marcante para fazer o alinhamento do bloco inteiro? POR QUE QUASE TODO 
O TEXTO ESTÁ EM CAIXA-ALTA (LETRAS MAIÚSCULAS)? Os elementos 
logicamente próximos estão em proximidade? Existe um ponto central de 
foco? Por que ele não existe e como poderíamos criar um? O que poderia ser 
usado como elemento repetitivo? Há realmente a necessidade de colocar um 
contorno tão pesado e o título em um box? 


Pegue um pedaço de papel vegetal para cópia e trace o contorno do anúncio. 
Depois, trace os elementos separadamente dentro deste contorno, reorganizando- 
os de maneira a criar uma página mais profissional, limpa e direta. Trabalhe 
à sua maneira, usando cada um dos princípios abordados: proximidade, 
alinhamento, repetição e contraste. 


Ancient 

Cerâmicas e Interiores 


City 


PREÇOS DE ATACADO 
PARA O PÚBLICO 

CERÂMICA• LINÓLEO 



•TALAVERA 
•SALTILLO 

• MONTERREY 

• CERÂMICA DALLAS 

• ASTECA 

• MIDSTATE 

• MÁRMORE DE QUALIDADE 


GRANDE OPÇÃO 
DE CERÂMICAS 
NO SHOW-ROOM 

HORÁRIOS: 

DAS 8:30 ÀS 17:00, DE 2 3 A 6 a -FEIRA 
DAS 9:00 ÀS 13:00, AOS SÁBADOS 



1776 CUPERTINO ROAD 

(PRÓXIMO À ESCOLA E À EASY PRINT) 

982-7219 



PROXIMO A 

SANTANA 





ESTACIONAMENTO NO LOCAL 
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Resumo 

Este resumo conclui nossa abordagem sobre design (diagramação). É provável 
que você ainda queira ver mais exemplos. Eles se encontram espalhados 
por aí, ao seu redor. Espero ter transmitido a você, sem grandes sofrimentos, 
uma consciência visual aperfeiçoada. Pensei em fornecer opções de gabaritos 
de design, mas como já se diz por aí, é melhor ensinar a pescar do que 
oferecer o peixe. 

Lembre-se de que os designers profissionais estão sempre "roubando" 
outras idéias; eles estão em constante busca de inspiração. Se você 
estiver fazendo um folheto, encontre um de que realmente goste e 
utilize o layout. Utilizando apenas seu próprio texto e suas figuras, o 
folheto que o inspirou fica completamente diferente do que você criar. 
Descubra um cartão de visitas que o agrade e adapte-o ao seu. Neste 
processo de adaptação, ele ficará diferente e será completamente seu. 
Todos agimos assim. 

Se você ainda não fez isso, aconselho-o enfaticamente a ler The Mac is 
not a typewriter e The PC is not a typewriter. Se você ainda estiver naquela 
fase de datilografar (ou digitar) dois espaços após os pontos finais; se 
você tiver o hábito de sublinhar os textos; se não utilizar as verdadeiras 
apóstrofes e aspas (“ ” e não ”), então é sério: você realmente precisa ler 
um desses livros. 

Entretanto, vá devagar. Não leve tão a sério essa coisa de design. Garanto 
que se você simplesmente seguir esses quatro princípios, criará materiais 
dinâmicos, interessantes e organizados. Você se orgulhará deles, e se 
divertirá também! 
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Coisas que você pode fazer para aumentar sua 
sensibilidade visual 

Em uma de minhas primeiras aulas de design criamos a definição PVA: 
pessoa visualmente analfabeta. Esse rótulo costumava ser atribuído 
ao cliente. Se há pouco tempo você era um PVA, agora que você já leu 
este livro até aqui, nunca mais será um deles. Seguem algumas dicas para 
você aumentar ainda mais sua sensibilidade visual. 

Veja. Crie um arquivo de idéias. Uma pasta ou até mesmo uma caixa 
onde você possa guardar designs que o impressionaram: anúncios, folhetos, 
imagens, letras, diagramações interessantes de fontes, embalagens, propagandas 
em geral, ou seja, qualquer coisa que mexa com algo dentro de você. Os 
designers costumam ter um arquivo como este e o utilizam como fonte 
de idéias e inspiração. Antes de começar outro projeto, dê uma olhada 
no seu arquivo de idéias. 

Diga. Ao observar um design do qual você goste, passe alguns minutos 
descrevendo os motivos de sua aprovação. Conscientemente, indique os 
pontos nos quais foram aplicados os princípios de proximidade, alinhamento, 
repetição e contraste. Anote em um papel ou grave mentalmente a técnica 
mais interessante e ousada que tenha sido aplicada, como algum tipo 
muito grande ou pequeno, um tratamento especial sobre uma imagem, 
espaçamento etc. 

Faça um esboço. Quando você se deparar com um material diagramado 
de maneira pobre, faça um esboço com algum aperfeiçoamento, ou recorte 
os elementos e- reorganize-os. Quando você realmente coloca o lápis 
sobre o papel, mais idéias surgem, o que não acontece com tanta ênfase 
se você simplesmente pensa a respeito. Nunca consegui imaginar como 
meus livros ficariam, até começar a produzi-los e ver tudo crescendo no 
papel (ou no monitor). 
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tipologia é um dos meios 
mais eloqüentes de expressão 
do estilo de cada época. 
Como na arquitetura, 
ele oferece o perfil mais 
característico de um período 
e o mais rígido testemunho 
da situação intelectual de 
uma nação. 

—Peter Behrau 




Parte Dois : Criação através da Tipologia Q 



A segunda metade deste 
livro aborda especificamente 
o uso da tipologia 
(os tipos, as letras), já que 
ela é a essência do design, certo? 
Esta seção trata particularmente 
do problema de se combinar 
mais de uma fonte em 
um material. Apesar de eu 
focalizar principalmente a 
função estética da tipologia, 
nunca se esqueça de 
que seu objetivo é a 
comunicação.O tipo utilizado 
em um trabalho não deve 
jamais inibir a comunicação. 
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Os Deuses se recusam a responder. 


Eles se recusam porque não sabem. 


—m 




Tipo (&Vida) 


0 tipo é o material básico de qualquer página impressa. Ele costuma ser 
irresistivelmente apelativo e, às vezes, absolutamente imperativo para a 
diagramação de uma página que contenha mais de uma fonte. Mas como 
saber quais fontes combinam entre si? 

Na Vida, quando há mais de um em qualquer coisa, estabelece-se uma 
relação dinâmica. No Tipo, costuma haver mais de um elemento por 
página. Mesmo um documento com um simples texto corrido tem títulos, 
subtítulos ou, no mínimo, suas páginas numeradas. Nesta situação dinâmica 
da página (ou da vida), é estabelecida uma relação que pode ser concordante, 
conflitante ou contrastante. 

Uma relação concordante ocorre quando usamos somente 
uma família de fontes, sem muitas variações de estilo, tamanho, 
peso etc. É fácil manter a harmonia da página e esta disposição 
tende a conferir ao material uma estética calma ou formal (e, 
às vezes, chata). 

Uma relação conflitante ocorre quando combinamos fontes 
similares em estilo, tamanho, peso etc. As similaridades são 
incômodas porque as atrações visuais não são as mesmas 
(concordantes), mas também não são diferentes (contrastantes), 
portanto, criam um conflito. 

Uma relação contrastante ocorre quando combinamos fontes 
separadas e elementos nitidamente diferentes entre si. Os de¬ 
signs visualmente interessantes que costumam atrair sua atenção 
têm, em geral, bastante contraste e os contrastes são enfatizados. 

A maioria das pessoas tende a se perder quando o assunto é combinar 
mais de uma fonte em uma única página. É preciso sentir se uma fonte 
deve ficar maior ou se um elemento deve ficar mais evidenciado. Mas, 
quando você consegue reconhecer e dar nome aos contrastes, tem controle 
sobre eles. Assim, poderá chegar à base do problema e descobrir soluções 
mais interessantes. Este é o principal tema desta seção. 
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Concordância 

Um design estará em concordância quando você optar pela utilização de 
apenas uma fonte e os outros elementos que compõem a página possuírem 
as mesmas qualidades daquela fonte. Talvez você utilize a versão em 
itálico da mesma fonte; talvez você coloque um tamanho maior nos 
títulos; talvez você use uma imagem ou vários ornamentos, mas a impressão 
básica ainda será concordante. 

A maioria dos designs concordantes tende a ser mais calma e formal. 
Isso não significa que a concordância seja indesejável. Basta estar consciente 
da impressão que você criará aplicando elementos que estejam todos em 
concordância entre si. 


A vida nada mais é do que uma sombra 
em movimento, um pobre ator que caminha 
empertigado e se queixa sobre o palco, e que, 
depois, não se ouve mais; é uma lenda 
narrada por um idiota, cheia de sons e 
de fúrias, mas sem significado. 

▲ 

Este exemplo concordante foi 
diagramado na fonte Nofret. 

A primeira letra é maior e algumas 
das palavras estão em itálico 
(a Nofret Italic), mas a peça inteira 
tem uma aparência suave. 
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CONCORDÂNCIA Q 


Sabia? 


Meu nome é_ 

Minha música preferida é_ 

Quando eu crescer, quero ser 



A A fonte pesada combina com o 
contorno mais forte. Mesmo a linha 
para preencher está um pouco forte. 


► 

A fonte, a borda fina e os 
ornamentos delicados 
oferecem a mesma 
impressão quanto ao estilo. 


13 Osdè/ cA-to/ caxduxíVnente 

cxux^íxAxuÍQy cv pxiAÍxeijia/!y ctc/ 
rvQAÁa- ceAtmíWiiu, cLe^ exiA xitri en-ia- 


ÁXV £?<xditay 


1 ° cfe> a-ê/u.6 

15:00 ftxvuià. 
xlce l^Gij Scpua/Xe 









B3 DESIGN PARA QUEM NÃO É DESIGNER 


Conflito 

Um design tem conflito quando se adotam duas ou mais fontes similares 
na mesma página, mas que não são efetivamente diferentes ou iguais. Vi 
vários estudãntes tentando achar uma fonte igual à outra na página, 
procurando por uma fonte com "aparência similar". Está errado. Quando 
se colocam duas fontes parecidas (mas não iguais) juntas, a maior parte 
das pessoas que olha para o material acha que foi um erro. 

A concordância é um conceito sólido e útil; o conflito deve ser evitado. 


A vida nada mais é do que uma sombra 
em movimento, um pobre ator que caminha empertigado 
e se queixa sobre o palco, e que, depois, não 
se ouve mais; é uma lenda narrada por um idiota, 
cheia de sons e de fúrias, mas sem significado. 


O que acontece neste exemplo 
quando vo cê lê a frase 
“cheia de sons e de fúrias”? 

Você sabe por que ela está em outra fonte? 
Você fica em dúvida se é ou não um erro? 
Isso faz com que você pisque? 

A letra inicial, em tamanho maior; aparenta 
estar exatamente em seu lugar? 
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Sabia? 

Meu nome é_ 

Minha música preferida é_ 

Quando eu crescer, quero ser 


A Observe especificamente a letra “a” no título e nas 
outras linhas. Ela é similar; mas não é igual. O 
contorno não tem o mesmo peso visual que o tipo e 
as linhas, e eles não estão contrastando muito. Há 
muito conflito neste pequeno material. 


► 

O pequeno convite 
tem duas fontes 
manuscritas 
diferentes, mas com 
várias similaridades 
entre si; porém, 
não são iguais e 
também não são 
diferentes. Os 
ornamentos têm o 
mesmo tipo de 
conflito. O material 
parece um pouco 
desorganizado. 
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Não há qualidade neste mundo que não exista devido a um simples contraste. Nada 
existe por si mesmo. -Herman Melville 


Agora vem a parte divertida. Criar concordância é algo muito fácil; criar 
conflito é fácil, porém indesejável. Criar contrastes é muito divertido. 

O contraste marcante atrai os olhos, como você pôde aprender na seção 
anterior sobre design. Uma das maneiras mais eficazes, simples e satisfatórias 
de se conferir contraste a um desenho é através da tipologia. 


A vida nada mais é do que uma sombra em movimento, 
um pobre ator que caminha empertigado 
e se queixa sobre o palco, e que, depois, não se ouve mais; 

é uma lenda narrada por um idiota, 

ekeia de íohí e òe fúmt, 

significando nada. 


▲ 

Neste exemplo é óbvio que a frase 
“cheia de sons e de fúrias” deveria estar em 
outra fonte. O material ficou visualmente mais 
interessante e com mais força, devido ao 
contraste dos tipos. 
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CONTRASTE 


Sabia? 

Meu nome é_ 

Minha música favorita é_ 

Quando eu crescer, quero ser_ 


A Agora o contraste entre as fontes está nítido (elas 
são realmente da mesma família de fontes): a fonte 
em negrito contrasta com a fonte muito leve (light). 
As espessuras das linhas do contorno e de 
preenchimento também estão nitidamente 
diferenciadas. 

► 

Este convite foi 
feito com duas 
fontes 
completamente 
diferentes; elas 
diferem de várias 
maneiras. 

A figura capta a 
força da fonte 
escura, 
acrescentando 
outro ponto de 
contraste à fonte 
manuscrita e 
criando um 
toque repetitivo. 
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O contraste não funciona apenas na estética do material. Ele está 
intrinsecamente relacionado à organização e à clareza das informações 
colocadas na página. Nunca se esqueça de que seu objetivo é comunicar. 
A combinação-de fontes diferentes deveria aperfeiçoar a comunicação e 
não confundi-la. 

Há seis maneiras claras e diferentes de contrastar a tipologia: tamanho, 
peso, estrutura, forma, direção e cor. As páginas a seguir contêm informações 
sobre cada um desses contrastes, respectivamente. 

Apesar de eu ter feito os contrastes um a um, é difícil que apenas um 
contraste seja eficaz. Em geral, o efeito costuma ser reforçado combinando- 
se e enfatizando-se as diferenças. 

Se você tiver dificuldades para visualizar o que está errado com uma 
combinação de fontes, não procure pelas diferenças entre elas: procure 
pelas suas similaridades; serão elas as responsáveis pelo problema. 

A principal regra a ser seguida no contraste de tipos é a seguinte: não 
seja tímido! 

Mas... _ 

Antes de aprender as várias maneiras de contraste, você precisa estar 
familiarizado com as categorias de tipos. Passe alguns minutos em cada 
página do próximo capítulo observando as similaridades que unificam 
uma categoria de tipos. Depois, tente encontrar dois exemplos daquele 
estilo de tipologia antes de passar para a próxima categoria. Olhe nas 
revistas, nos livros, em embalagens, enfim, em qualquer material impresso. 
Acredite: gastar alguns minutos com esta tarefa fará com que você compreenda 
tudo de maneira mais rápida e profunda! 






Categorias 
de tipos 


Hoje em dia, há milhares de tipos disponíveis, e várias pessoas criam 
novo tipos todos os dias. Entretanto, a maior parte dos tipos pode ser 
classificada em uma das seis categorias mencionadas a seguir. Antes de 
tentar conhecer os contrastes de tipos você deveria conhecer as similaridades 
entre os amplos grupos de tipos, já que são elas as responsáveis pelos 
conflitos nas combinações de tipos. O objetivo deste capítulo é torná-lo 
mais consciente dos detalhes das letras. No próximo capítulo iniciarei a 
abordagem sobre a combinação dos tipos. 

Os seis principais grupos de tipos são: 

Estilo Antigo 

Moderno 

Serifa Grossa 

Sem Serifa 



DECORATIVO 
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Estilo Antigo 

Os tipos criados no estilo antigo baseiam-se na escrita à mão dos escribas, 
que trabalhavam com uma pena na mão. Os estilos antigos sempre têm 
serifas (leia a definição abaixo) e as serifas das letras em caixa-baixa 
(minúsculas) sempre têm um ângulo (o da caneta). Por isso, todos os 
traços curvos das letras passam de grossos para finos, o que chamamos 
tecnicamente de "transição grosso-fino". Esse contraste no traço é relativamente 
moderado, o que significa que ele passa de fino a mais grosso. Se você 
desenhar uma linha nas partes mais finas dos traços curvos, essa linha 
será diagonal. Isso se chama ênfase. Um tipo em estilo antigo tem uma 
ênfase diagonal. 


Serifa 


As serifas de letras 

em caixa-baixa ênfase 
são inclinadas diagonal. 

Estilo Antigo 


Goudy 


Transição grosso- 
fino moderada nos 
traços 


Goudy Palatino Times 
Baskerville Garamond 


Na sua opinião, esse tipos parecem iguais? Não se preocupe: eles parecem 
iguais para qualquer pessoa que não tenha estudado tipografia. Sua 
"invisibilidade" é exatamente o que faz com que os t ipo s em estilo antigo 
formem o melhor grupo de tipos para grandes extensões de texto corrido. 
É raro haver características diferenciadas que apareçam na leitura; essas 
características não chamam atenção. Se você estiver trabalhando com 
um texto muito longo e deseja realmente que as pessoas o leiam, coloque- 
o no estilo antigo. 
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Moderno 

Com o progresso da história, a estrutura do tipo mudou. O tipo tem suas 
próprias tendências e também sucumbe ao estilo de vida e às mudanças 
culturais, assim como os penteados, a moda, a arquitetuta ou a linguagem. 
Em 1700, o aperfeiçoamento do papel, as técnicas mais sofisticadas de 
impressão e um aumento genérico dos dispositivos mecânicos foram 
fatores que fizeram com que o tipo também se tornasse mais mecânico. 
Novos tipos já não seguiam mais o estilo da escrita com a pena. Os tipos 
modernos têm serifas, mas agora elas são horizontais e não inclinadas, e 
são muito finas. Como uma ponte de aço, a estrutura é forte, com uma 
transição grosso-fino radical — ou contraste — nos traços. Não há evidências 
da inclinação da pena; a ênfase é perfeitamente vertical. Os tipos modernos 
têm uma estética fria e elegante. 


Ênfase As serifas de letras em caixa- 

vertical j baixa são horizontais e finas 


Bodoni Pôster Compressed 

Transição grosso-fino radical 
nos traços 


Moderno 


Bodoni Times Bold 
Fenice Ultra Walbaum 


Os tipos modernos têm uma aparência forte, principalmente quando são 
muito grandes. Por suas fortes transições grosso-fino, a maioria dos tipos 
modernos não são uma boa opção no caso de grandes extensões de 
texto corrido. As linhas finas quase desaparecem, as grossas são salientes 
demais e o efeito sobre a página é classificado como "ofuscante". 
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Um novo conceito surgiu junto com a revolução industrial: o da propa¬ 
ganda. Primeiramente, os profissionais selecionavam os tipos modernos 
e faziam com que os pontos grossos ficassem ainda mais espessos. Você 
já deve ter visto pôsteres com tipos assim: à distância, tudo o que se 
pode ver são linhas verticais. A solução óbvia para este problema foi 
fazer com que a letra inteira ficasse mais grossa. As letras com serifa 
grossa têm pouca ou nenhuma transição grosso-fino. 

Às vezes, essa categoria de tipos é chamada de Clarendon, porque a fonte 
Clarendon (mostrada a seguir) é a síntese desse estilo. Esses tipos também 
são chamados de Egípcios, porque tornaram-se conhecidos durante a 
fase egiptomaníaca da civilização ocidental dos Estados Unidos; muitos 
tipos pertencentes a essa categoria foram classificados com nomes egípcios 
para que pudessem ser facilmente vendidos (Memphis, Cairo, Scarab). 


Ênfase As serifas de letras em caixa- 
vertical baixa são horizontais e grossas 

Serifado 

Clarendon 

Pouca ou nenhuma transição 
grosso-fino (ou contraste) 
nos traços 

Clarendon Memphis 

Memphis Extra Bold 

New Century Schoolbook 

Muitos dos tipos com serifa grossa, com contraste grosso-fino suave 
(como a Clarendon ou a New Century Schoolbook), têm um grau muito 
elevado de legibilidade, o que significa que podem ser facilmente utilizados 
em textos extensos. Entretanto, esses tipos criam uma página mais escura 
do que aqueles em estilo antigo, pois seus traços são mais grossos e o 
peso de cada letra é relativamente igual. Tipos com serifa costumam ser 
utilizados em livros infantis, por sua estética clara e direta. 


*N. do E. O termo serifa grossa não é usado em português. Entretanto, a autora distingue três tipos de senta - inclinada, horizontal 
e grossa - que achamos por bem manter. No Brasil vemos apenas os termos com serifa e smi serifa. 
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Em francês (e em inglês também), este estilo de tipo é chamado síims serif, 
o que significa sem serifa. Portanto, as fontes sem serifa não possuem 
serifas nos finais de seus traços. A idéia de remover as serifas foi um 
progresso mais tardio na evolução da tipologia e não obteve muito sucesso 
até o início do século vinte. 

Os tipos sem serifa são quase sempre de peso igual, o que significa que — 
virtualmente — não há uma transição grosso-fino visível nos traços; as 
letras têm sempre a mesma espessura. 

Veja também a próxima página para conhecer informações importantes 
sobre os tipos sem serifa. 


Não há serifa 
em parte 


Não há ênfase, por não 
haver diferenciações 
grosso-fino 


alguma grosso-fino B 

Sem serifa 


Não há nenhuma 
transição grosso-fino 
nos traços 


Franklin Gothic 


Antique Olive Formata 
Gill Sans Franklin Gothic 
Folio Syntax 

Se as únicas fontes sem serifa que você possui em sua biblioteca de 
fontes forem a Helvética e a Avant Garde, a melhor coisa a fazer para 
aperfeiçoar a diagramação de suas páginas seria investir em uma família 
de tipos sem serifa que incluísse uma fonte forte, pesada, bem marcante. 
Cada uma das famílias acima tem uma ampla variedade de pesos, que 
vão do light (bem suave) ao extra black (negrito bem forte). Depois desse 
investimento você ficará surpreso com o aumento das opções para a 
criação de páginas interessantes, que irão atrair a atenção dos leitores. 
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A maioria das fontes sem serifa tem peso igual, como mostramos anteriormente. 
Entretanto, algumas poucas (apenas duas ou três na grande coleção de 
fontes sem serifa) têm uma transição grosso-fino suave. A seguir, um 
exemplo de uma- fonte sem serifa com ênfase; seu nome é Óptima. Fontes 
como esta são muito difíceis de se combinar com outros estilos na diagramação 
de uma página. Elas são similares às fontes serifadas em seus traços grossos- 
finos, e são similares às fontes sem serifa justamente na inexistência de 
serifas. É preciso ser muito cuidadoso ao trabalhar com uma fonte sem 
serifa como esta. 


A Óptima é uma fonte excepcionalmente 
bonita, mas é preciso ser muito cuidadoso 
na combinação desta com outras fontes. 
Observe os traços grossos-finos. Ela tem a 
elegância clássica de uma fonte em estilo 
antigo, mas sem as serifas. 


Sem serifa 


Óptima 
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Manuscrito 


A categoria de tipos manuscritos inclui todos os tipos que parecem ter 
sido escritos à mão, com uma caneta tinteiro, com um pincel ou, às 
vezes, com um lápis ou caneta profissional. Esta categoria poderia facilmente 
ser segmentada, formando manuscritos que se conectam, manuscritos 
que não se conectam, manuscritos que paracem impressos por processo 
manual, manuscritos que imitam estilos caligráficos tradicionais etc. Mas 
para atingirmos nossos propósitos, colocaremos todos em um único pote. 


Cascade Zapf Chancenj 


Os tipos manuscritos são como uma torta de queijo: deveriam ser “comidos" 
(utilizados) pouco a pouco. É claro: os mais elaborados nunca deveriam 
ser colocados na forma de longos blocos de texto e nunca com todas as 
letras em caixa-alta (maiúsculas). Mas esses tipos podem assumir características 
particularmente surpreendentes quando utilizados em tamanhos muito 
grandes. Não tenha medo! 



ic’ m 
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Decorativo _ 

Os tipos decorativos são fáceis de identificar: se a simples idéia de ler um 
livro inteiro em um detrminado tipo o fizer enlouquecer, é provável que 
você possa incluí-lo no nosso "pote" de tipos decorativos. Eles são ótimos, 
engraçados, diferentes, fáceis de usar, costumam ser baratos e sempre 
existe uma fonte .para cada capricho que você queira expressar. É lógico: 
por serem tão diferenciados, seu uso deve ser limitado. 


Addled EX7RAVAGAMZA 

FAJiTé Improv, ínlitxe 

JÜNIPER S€AÍMTT 


Quando você utilizar uma fonte decorativa, vá além da impressão inicial. 
Por exemplo, se a Improv parece informal para você, tente utilizá-la em 
uma situação mais formal e observe o que acontece. Se você achar que a 
Juniper lembra filmes de bang-bang, experimente usá-la em um projeto 
de empresa ou em uma floricultura e veja o que acontece. Dependendo 
de como você utilizá-las, as fontes decorativas podem trazer de maneira 
espalhafatosa emoções óbvias ou você poderá manipulá-las para que 
suas conotações sejam muito diferentes da primeira impressão. Mas este 
é um assunto para outro livro. 
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Para fazer uso dos tipos de maneira eficiente, você deve estar consciente. 
Com isso quero dizer que você deve manter seus olhos abertos, deve 
observar os detalhes, deve tentar transformar o problema em palavras. 
Quando você vir algo que chame muito sua atenção, verbalize o motivo 
deste interesse. 

Passe alguns minutos olhando uma revista. Tente categorizar as fontes 
que aparecerem. Muitas delas não se encaixarão completamente em nenhuma 
das alternativas, mas não faz mal: escolha a categoria que parecer ser a 
mais aproximada. O que interessa é você observar atentamente a forma 
das letras, o que é imprescindível para que você seja capaz de combiná- 
las de maneira eficaz. 


Desafio n° 5: categorias de tfpos _ 

Trace linhas que liguem a categoria ao tipo: 

Estilo antigo NO ROdeiO 

Moderno Alta Sociedade 


Serifa grossa 


e. 


( !$a/c 


o 

'avms 


Sem serifa Como posso me lembrar, Adam! 

Manuscrito O enigma continua 

Decorativo É sua atitude 





□ design para quem não é designer 


Desafio n° 4: transições grosso-fino 

As fontes a seguir têm: 

A transições grosso-fino moderadas 
B transições grosso-fino radicais 

C nenhuma transição grosso-fino (ou uma transição imperceptível) 


Higgle 

A (§) c 

Piggle 

ABC 

Wiggle 

ABC 

Jiggle 

ABC 

Diggle 

Giggle 


ABC ABC 
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Desafio n° 5: serifas 

As letras em caixa-baixa (minúsculas) no exemplos a seguir têm: 
A serifas finas e horizontais 
B serifas grossas (dica) e horizontais 
C não têm serifas 
D serifas inclinadas 


Higgle 

A B C D 

Piggle 

A B C D 

Jiggle 

A B C D 

Wiggle 

A B C D 

Diggle 

Giggle 


A B C D 


A B (C D 
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Resumo 


Eu não conseguiria enfatizar suficientemente como é importante conscientizar- 
se sobre essas amplas categorias de tipos. No decorrer do próximo capítulo 
ficará claro o motivo dessa importância. 

Existe um exercício muito simples para treinar suas habilidades visuais: colecionar 
modelos das categorias. Recorte-os de qualquer material impresso que puder 
encontrar. Você consegue identificar padrões pertencentes a uma grande 
categoria? Vá em frente e crie subgrupos, como fontes em estilo antigo com 
alturas do x iguais e descendentes verticais (veja o exemplo a seguir), ou 
manuscritos que se parecem mais com impressos à mão do que com escrita 
cursiva à mão, ou fontes espandidas e condensadas (veja abaixo). Essa 
conscientização visual sobre os formatos das letras dará a você o poder de 
criar combinações de tipos interessantes, provocativas e eficazes. 


Bernhí 


30 point 


ard xq 


Ascendentes são as partes das letras que 
são mais altas do que a altura do x. 

A altura do x é altura da parte principal 
das letras em caixa-baixa (minúsculas). 

Descendentes são as partes das letras 
que ficam abaixo da linha de base (a 
linha invisível, sobre a qual o tipo fica). 


▲ Observe a altura do x da palavra Bernhard comparada à Eurostile. 
^ Observe a altura do x em relação aos ascendentes. A palavra 
Bernhard tem uma altura do x pequena e ascendentes altos. A 
maioria das fontes sem serifa tem altura do x grande. Comece a 
observar esses detalhes. 


Eurostile Bold 18 point 
Eurostile Bold Extended 
Eurostile Bold Condensed 

▲ As fontes expandidas parecem esticadas em suas laterais; já as 
condensadas parecem prensadas. Ambas são apropriadas para 
determinadas circunstâncias. 



□ 


Contrastes 
de tipos 

As páginas a seguir descrevem as várias maneiras de contrastar os tipos. 
Cada página apresenta exemplos específicos e, no final da seção, há exemplos 
de uso desses princípios de contraste na diagramação das páginas para 
criar interesse visual e também para aperfeiçoar a comunicação. Um leitor 
nunca deveria tentar descobrir o que está acontecendo na página: o foco, 
a organização do material, o propósito, o fluxo de informações deveriam 
ser reconhecidos instantaneamente, através de um único olhar. E, além 
desses fatores de suma importância, não custa nada fazer com que o 
material fique bonito! 

Estes são os contrastes que abordarei: 

T 

| amanho 


Peso 

Estrutura 



CGR 






□ DESIGN PARA QUEM 


NÃO É 


DESIGNER 



◄ A qual 
categoria de 
tipos pertence 
esta fonte? 


Um contraste de tamanhos torna-se óbvio: tipo grande versus tipo pequeno. 
Mas para fazer com que um contraste de tamanhos funcione de maneira 
eficaz, não seja-tímido. Não se pode contrastar um tipo de 12 pontos com 
um de 14 pontos; na maioria das vezes eles simplesmente ficarão em 
conflito. Não se pode contrastar um tipo de 62 pontos com um de 72 
pontos. Se você quiser contrastar dois elementos tipográficos através de 
seus tamanhos, faça-o. O contraste deve ser óbvio: não deixe que as pessoas 
acreditem que a diferença é apenas um erro. 



▲ Escolha o item tipográfico 
que você deseja destacar 
Enfatize-o através de 
contrastes. 



Volume 1 ■ Número 1 Janeiro • 2001 


A Se você precisar inserir outros elementos tipográficos e 
eles não forem realmente tão importantes para o público 
leitor em geral, deixe-os em tamanhos pequenos. Quem 
se importa com o número do volume? Se alguém quiser 
saber este número ainda poderá ser lido. Não é preciso 
colocar essas informações em 12 pontos! 
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Um contraste de tamanho nem sempre significa que você deva fazer 
com que o tipo fique grande; significa apenas que deve haver um contraste. 
Por exemplo, quando você vê uma pequena linha isolada em uma página 
grande de jornal, fica com vontade de lê-la, certo? Grande parte do que o 
convida a fazê-lo é o contraste do tipo muito pequeno colocado em uma 
página grande. 


Hé. Hé' Você otou' 


Duis aulcm cl cum irurc do¬ 
lo* in rep rchcnd crit in volup 
tate velit esse moles taie son 
conswquat, vcl illum dolorc 
en guiat nulla pariatur. Al vero 
esos ct aceusam et justo odio 
di sm ssi in qui blan dit praesent 
lupatum dei enit vel illum. 


Aiguc duos dolor et molestais 
cxccpfur sim occaecat cuptd 
al non provident, simil 
tempor. Sirt in culpa qui of 
ficia descrunt aliquan crat 
volupat. Lorcm ipsum dolor 
sit amet, consectetur adip 
scing elit. diam no nnumy. 


4 Se você visse uma 
página assim em um 
jornal, leria o que está 
escrito em letras 
pequenas? O que o faria 
ler? O contraste. 


Rainfish 

INCORPORATED 


A Às vezes o contraste do grande com o pequeno pode 
ser opressivo, abafando o tipo pequeno. Utilize este 
recurso como vantagem. Quem realmente quer ler a 
palavra “incorporated”? Apesar de pequena, com 
certeza ela não é invisível, portanto, se alguém quiser 
lê-la, ela estará aí. 
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Recomendo repetitivamente que não se utilizem letras em caixa-alta 
(maiúsculas). Provavelmente, as letras em caixa-alta só devem ser utilizadas 
para que o tipo fique maior, certo? Ironicamente, quando o tipo é colocado 
em caixa-alta, ele fica duas vezes maior do que em caixa-baixa (minúsculas), 
então, quando se usa o tipo em caixa-alta, geralmente diminui-se o tamanho 
das letras. Se o texto for colocado em caixa-baixa você poderá real mente 
estabelecer tamanhos maiores, além de ser um estilo mais legível. 


TOAD HALL PUBLISHING 


Toad and Rat 
Editores 

West Bank • Londres 


A Este título 
está em 18 
pontos. É o 
maior 
tamanho 
que posso 
utilizar 
nesse 

espaço em 
caixa-alta. 


Toad Hall Publishing 


Toad and Rat 
Editores 

West Bank • Londres 


◄ Colocando 
o título em 
caixa alta e 
baixa pude 
aumentá-lo 
para 24 
pontos, e 
ainda há 
espaço para 
deixar a 
letra em 
bold 
(negrito). 
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Utilize o contraste de tamanhos de maneiras inesperadas e provocativas. 
Muitos de nossos símbolos tipográficos, como números, o 'e' comercial 
ou as aspas são muito bonitos quando colocados em tamanhos muito 
grandes. Utilize-os como elementos decorativos em um título ou menção, 
ou como elementos repetitivos na publicação inteira. 



•4 Um contraste 
diferente de 
tamanho pode se 
tornar um elemento 
gráfico em si, o que 
será muito útil se 
você estiver com 
limitações quanto às 
figuras disponíveis 
para inserção em 
um projeto. 


Dicas de Viagem 

Leve duas vezes mais dinheiro do 
que você acha que vai precisar. 

Leve a metade da roupa que você 
acha que vai precisar. 

Nem se preocupe em levar todos os 
endereços das pessoas para quem 
você pensou em escrever. 


◄ Se você usar 
um item com 
um tamanho 
não usual, avalie 
se poderá 
reaproveitar 
esta estética 
em outros 
pontos do 
mesmo 
material para 
criar uma 
repetição 
interessante 
e útil. 
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◄ A qual 
categoria de 
tipos pertence 
esta fonte? 


O peso de uma fonte refere-se à espessura dos traços. A maioria das 
famílias de tipos é desenhada com vários pesos: regular, bold (negrito), 
às vezes semibold, extra bold ou light. Na combinação de pesos, lembre- 
se daquela regra: não tenha medo. Não contraste o peso regular com o 
semibold: coloque o bold mais forte. Se você combinar tipos de famílias 
diferentes, uma fonte será sempre mais bold do que a outra, portanto, 
enfatize-a. 

Nenhuma das fontes padrão que vieram em seu computador tem um 
estilo muito bold em sua família. Eu o aconselharia a investir em pelo 
menos uma fonte mais forte. Dê uma olhada nos catálogos de tipos para 
encontrar uma que o agrade. O contraste de pesos é uma das melhores 
maneiras de aumentar a estética visual de uma página sem redesenhar 
algo, mas você nunca poderá alcançar o contraste belo e forte se não 
tiver uma fonte com traços grandes e fortes. 


Formata Light 

Formata Regular 

Formata Médium 
Formata Bold 

Memphis Light 

Memphis Médium 

Memphis Bold 

Memphis Extra Bold 

Garamond Light 
Garamond Book 

Garamond Bold 
Garamond Ultra 


◄ Estes são exemplos dos 
vários pesos que costumam 
existir em uma família. 
Observe que não há muito 
contraste de peso entre o 
peso light e o próximo (que 
costuma ser classificado de 
regular; médium ou book). 

lambem não há um 
contraste marcante entre 
os pesos semibold e bold. 
Se você quiser criar 
contrastes através do peso 
das fontes, não tenha 
medo. Se o contraste 
não for marcante, parecerá 
um erro. 
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Outro Newsletter 


Titulo 

Lorctn ipvum dolo» ul 
amei. coexdetw mátçn 
ciag elil. diam aoaaauo) 
ciuunod tempo» inodunt 
ut lobore et dokwc nagna 
aliquam erat votupsl Al 
cnim ad minimim vcniami 
qui* noitrud eicrvitalioo 
uilamcorpcr uiKnpit 
labom ni*i ut alquip eiea 
conunodo * onvcquat 

Outro Titulo 

Om autcm el cum irurt 
dolo» in repcebendeni in 
voluputc velit cue 
moleratie von coniuquat. 
vel illum doIore en guiai 
oulla panatur Al vero evo* 
ei accusam el justo odio 
ditamim qui biaodn 
praesem lupatum delemt 
aigoe duo* dolo» el 
Molestai* exccptur siol 
occaecai cupidal ooo 
p»o*idcni. timil tempo» 


Sul io culpa qui oíficia 
deserunl aliquan cral 
volupal Lorcm ipsum 
dolor sit amei. come* 
leiui adipscing elil, diam 
nonnumy ciusmod tem 
por incidunt ul lobore 
Primeiro subtítulo 
Et dolorc nagna aliquam 
erat volupal. Al ením ad 

noslAid exer ciiation 
ullamcorper sus cnpil 
tabon* oisi ul al quip cx 
ca com modo consequal 
Duis aulem cl cum irure 
dolor m rep rchcnd cru io 
voluptate velit esse moles 
uie son conswquat. vel 
illum dolore en guiai 
nulla panatur. Al vero 

odio ditnisxim qui blan 
dil praescnl lupatum dei 
cnii aigue dm» dolor el 
molestai* excepiur sini 


A Você se lembra desses exemplos na primeira parte do 
livro? À esquerda utilizei as fontes que vieram no 
computador: os títulos estão em Helvética Bold e o texto 
corrido está em Times Regular À direita, o texto corrido 
ainda está em Times Regular, mas usei uma fonte mais 
forte (com peso maior) nos títulos (Aachen Bold). Com 
essa simples mudança — um peso mais marcante para 
obter contraste — a página se tornou muito mais 
convidativa à leitura. (O título também está mais pesado e 
está invertido, dentro de uma caixa preta, o que dá ainda 
mais contraste.) 


Toad Hall Publishing 


Toad and Rat 
Editores 

West Bank • Londres 


A Você se lembra desse exemplo na página anterior? 
Colocando o nome da empresa em caixa alta e 
baixa no lugar de caixa-alta, pude aumentar o 
tamanho do tipo e ampliar o peso, acrescentando 
mais contraste e interesse visual ao cartão. O peso 
mais marcante também faz com que o cartão 
tenha um foco mais forte. 
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Além de fazer com que a página fique mais interessante aos olhos, o 
contraste de peso é uma das melhores maneiras de organizar as informações. 
Você já faz isso automaticamente quando coloca os títulos e subtítulos 
de seu newsletter em bold. Então, continue assim e vá mais adiante. Dê 
uma olhada no sumário a seguir; observe como você compreende 
instantaneamente a hierarquia de informações quando os títulos-chave 
ou as frases são colocadas em bold bem forte. Esta técnica também é útil 
no índice remissivo, pois possibilita que o leitor diferencie em um piscar 
de olhos se uma entrada de índice é de primeiro (item) ou de segundo 
nível (sub-item), eliminando assim a dúvida que costuma surgir quando 
procuramos alfabeticamente por um item. Observe o índice remissivo 
deste livro (ou de qualquer um dos meus). 


Sumário 

Introdução.9 

Furry Tells . 17 

Ladlc Rat Rotten Hut. 19 

Guilty Looks.21 

Center Alley.27 

Noisier Rams.33 

Marry Hatter Ladle Limb.55 

Sinker Sucker Socks Pants .... 37 

Effervescent.59 

Oiled Mudder Harbored.40 

Fey-Mouse Tells.41 

Casing Adder Bet.45 

Violate Huskings.47 

Lath Thing Thongs!.57 

Fryerjerker.58 

Hormone Derange.59 


Sumário 

Introdução 9 

Furry Tells 17 

Ladle Rat Rotten Hut. 19 

Guilty Looks.21 

Center Alley.27 

Noisier Rams 55 

Marry Hatter Ladle Limb.55 

Sinker Sucker Socks Pants .... 57 

Effervescent.59 

Oiled Mudder Harbored.40 

Fey-Mouse Tells 41 

Casing Adder Bet.43 

Violate Huskings.47 

Lath Thing Thongs! .57 

Fryerjerker.58 

Hormone Derange.59 


▲ Colocando os títulos dos capítulos em fontes mais bold 
(negrito), as informações importantes ficam disponíveis em 
um piscar de olhos, além de haver uma forte atração que 
move meus olhos. Outra vantagem é que este recurso cria 
uma repetição (um dos quatro princípios de design, 
lembra?). Também inseri um espaço acima de cada título 
em bold, de maneira que os títulos poderiam ser agrupados 
com seus respectivos subtítulos com maior nitidez (este é o 
princípio de proximidade, lembra?). 
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TIPO 


CONSTRASTE 


PESO [ES 


D E 


Se você tiver uma página muito cinza (só de texto corrido), sem espaço 
para a inserção de figuras ou para criar destaques com aspas, experimente 
colocar as frases mais importantes em um bold (negrito) forte. Elas atrairão 
o leitor para a leitura da página. (Se você utilizar um boíd sem serifa com 
o texto corrido serifado, provavelmente precisará deixar a fonte em bold 
sem serifa em um ponto menor, para que ela pareça estar do mesmo 
tamanho da do texto corrido.) 


Wants pawn tcrm 
dare worsted ladlc 
gull hoe lift wetter 
murder inner ladlc 
cordage honor itch 
offer lodge. dock. 
florist. Disk ladlc 
gull orphan worry 
putly ladlc rat cluck 
wetter ladlc rat hut. 
an fur disk raisin 
pimplc colder Ladlc 
Rat Rotten Hut. 
Wan moaning Ladlc 
Rat Rotten Hut’s 
murder colder inset. 
“Ladlc Rat Rotten 
Hut. heresy ladlc 
bsking winsome 
burden barter an 
shirker cocklcs Tick 
disk ladle basking 
tutor cordage offer 
groin-murder hoc 
lifts honor udder sit 
offer florist. Shakcr 
lakc! Dun stopper 
laundry wrole! Dun 
stopper pcck floors! 
Dun daily-doily in 


ner florist. an yon- 
der nor sorghum- 
stenches. dun stop¬ 
per torque wet no 
strainers!” 
“Hoe-cake. mur¬ 
der." resplendem 
Ladle Rat Rotten 
Hut. and stuttered 
oft oft. Honor wrote 
tutor cordage offer 
groin-murder. Ladle 
Rat Rotten Hut 
mitten anomalous 
woof. “Wail. wail. 
wail,” set disk wick- 
et woof, “Evanes- 
cent Ladle Rat Rot¬ 
ten Hut! Wares are 
putty ladle gull gor- 
ing wizard cued 
ladle basking?" 
"Armor goring tu¬ 
mor oiled groin- 
murder^," reprisal 
ladlc gull. "Gram- 
mar's seeking bet. 
Armor ticking arson 
burden barter an 
shirker cocklcs." 


“O hoe! Hcifer gnats 
woke.” setter wicket 
woof. butter taught 
tomb shelf, “Oi 1 
tickle shirt court 
tutor cordage offer 
groin-murder. Oil 
ketchup wetter Ict- 
ter. and den—O 
bore!” 

Soda wicket woof 
tucker shirt court. an 
whinny retched a 
cordage offer groin- 
murder. ptcked in¬ 
ner windrow. an 
sore debtor pore oil 
worming worse lion 
inner bet. 

Inner flesh. disk 
abdominal woof 
lipped honor bet. 
paunched honor 
pore oil worming. 
any garbled erupt. 
Den disk ratchet am- 
monol pot honor 
groin-murder's nut 
cup an gnat-gun, any 
curdled opc inner 


Wants pawn term 
dare worsted ladle 
gull hoe lift wetter 
murder inner ladle 
cordage honor itch 
offer lodge. dock. 
florist. Disk ladle 
gull orphan worry 
putty ladle rat cluck 
wetter ladle rat hut. 
an fur disk raisin 
pimple colder Ladlc 
Rat Rotten Hut. 
Wan moaning Ladle 
Rat Rotten Hufs 
murder colder inset. 
"Ladle Rat Rotten 
Hut. heresy ladle 
bsking winsome 
burden barter an 
shirker cocklcs. Tick 
disk ladle basking 
tutor cordage offer 
groin-murder hoe 
lifts honor udder sit 
offer florist. Shaker 
lake! Dun stopper 
laundry wrote! Dun 
stopper peck floors! 
Dun daily-doily in 


ner florist. an yon- 
der nor sorghum- 
stenches. dun stop¬ 
per torque wet no 
strainers!” 
"Hoe-cake. mur¬ 
der,” resplendem 
Ladle Rat Rotten 
Hut. and stuttered 
oft oft. Honor wrote 
tutor cordage offer 
groin-murder. Ladle 
Rat Rotten Hut mit¬ 
ten anomalous woof. 
"Wail. wail. wail." 
set disk wicket 
woof. "Evanescent 
Ladle Rat Rotten 
Hut! Wares are putty 
ladle gull goring 
wizard cued ladle 
basking?” 

"Armor goring tu¬ 
mor oiled groin- 
murderV reprisal 
ladle gull. “Gram- 
mar's seeking bet. 
Armor ticking arson 
burden barter an 
shirker cockles.” 


“0 hoe! Helter gnats 
woke," setter wicket 
woof. butter taught 
tomb shelf. "Oil 
tickle shirt court 
tutor cordage offer 
groin-murder. Oil 
ketchup wetter let- 
ter. and den—O 
bore!” 

Soda wicket woof 
tuckcr shirt court. an 
whinny retched a 
cordage offer groin- 
murder. picked in¬ 
ner windrow. an 
sore debtor pore oil 
worming worse lion 
inner bet. 

Inner flesh. disk 
abdominal woof 
lipped honor bet. 
paunched honor 
pore oil worming, 
any garbled erupt. 
Den disk ratchet am- 
monol pot honor 
groin-murder's nut 
cup an gnat-gun, any 
curdled ope inner 


▲ Uma página só com texto corrido desencoraja um leitor 
a prosseguir na leitura. Com o contraste criado pelo tipo 
em bold (negrito), o leitor pode localizar os pontos-chave 
e estará mais interessado em buscar as informações. 
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Estruturas: 

esta fonte? 

A estrutura de uma fonte refere-se à maneira através da qual ela é construída. 

Suponha que você precisasse montar uma fonte com o material de sua 
garagem. Algumas fontes são criadas com pesos iguais, com praticamente 
nenhuma mudança de peso nos traços, como se fossem tubulares (como 
a maioria das fontes sem serifa). Outras são feitas com grande ênfase nas 
transições grosso-fino, como as modernas. Ainda há as intermediárias. 

Se você combinar tipos de duas famílias diferentes, utilize duas famílias com 
estruturas diferentes. 

Lembra-se de tudo o que falamos antes, nesta mesma seção, sobre as 
diferentes categorias de tipos? Bem, agora estes conceitos são úteis. Cada 
uma das categorias baseia-se em estruturas similares. Portanto, a solução 
ideal será escolher duas ou mais fontes de duas ou mais categorias. 


Ode 

Ode 

Ode 

Ode 

Ode 

Ode 

Ode 

Ode 

Ode 

Ode 

Ode 

Ode 


A A estrutura refere-se à maneira através da 
qual uma letra é construída e, como podemos 
ver através deste exemplo, a estrutura de cada 
categoria é bastante distinta. 

► Regra Importante: nunca coloque duas 
fontes da mesma categoria na mesma 
página. Não há como disfarçar suas 
similaridades. Além disso, existem tantas 
opções! Por que dificultar as coisas? 


◄ Desafio: 

você 

conseguiria 
nomear cada 
uma das 
categorias de 
tipos 

representadas 
neste exemplo 
(uma 

categoria por 
linha)? Se não 
conseguir 
fazê-lo, releia 
a seção 
referente ao 
assunto, pois 
este conceito 
é muito 
importante. 
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Você leu The Mac is nota typewriter (O Mac não é uma máquina de escrever) 
ou The PC is not a typewriter (O PC não é uma máquina de escrever)? Se não 
leu, deveria fazê-lo. Nesses livros, digo que você jamais deveria colocar 
duas fontes sem serifa na mesma página, nem fazê-lo com duas fontes 
serifadas... até adquirir prática na área tipográfica. Depois de adquirir 
alguma prática você estará qualificado e autorizado a colocar duas fontes 
com ou sem serifa juntas na mesma página. 

Entretanto, a lei prega que você deve utilizar duas fontes de duas categorias 
diferentes de tipos, ou seja, poderá usar duas fontes serifadas se uma 
delas for de estilo antigo e a outra uma serifada ou moderna. Mesmo 
assim, é preciso ser cuidadoso e enfatizar os contrastes, sendo perfeitamente 
possível proceder assim de maneira eficaz. 

Evite colocar duas fontes em estilo antigo na mesma página; elas têm 
muitas similaridades e criarão um conflito. Evite colocar duas fontes modernas 
ou duas serifadas, pelo mesmo motivo. Evite utilizar duas fontes manuscritas 
na mesma página. 


► 

Nesta frase há cinco 
fontes diferentes. 
Elas têm uma 
boa estética 
quando aplicadas 
em conjunto, por 
um motivo: cada 
uma delas tem 
uma estrutura 
diferente; cada 
uma delas 
pertence a uma 
categoria 
diferente de 
tipos. 


Não deixe 

que as sementes 


de comer a melancia 

c<ymfwuyew. 
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Em primeiro lugar, fontes diferentes são tão indistingüíveis quanto tigres 
no zoológico. Portanto, se você ainda não consegue diferenciar uma fonte 
de outra, um jeito fácil de escolher estruturas contrastantes é optar por 
uma fonte serifada e por uma sem serifa. Em geral, as fontes sem serifa 
têm um contraste grosso-fmo em suas estruturas; as sem serifa costumam 
ter o peso totalmente igual. A combinação da fonte serifada com a sem 
serifa pode gerar uma infinita variedade de possibilidades, mas como 
você verá no exemplo a seguir, o simples contraste da estrutura não é 
bastante marcante; é preciso enfatizar a diferença combinando este contraste 
com outros, como o de tamanho ou o de peso. 


(peso igual) 
(grosso/fino) 


sem serifa 

vs. serifada 


Apenas o contraste da 
estrutura não é suficiente 
para criar a diferença 
efetiva entre os tipos. 
Aperfeiçoe os contrastes. 


Oiled Mudder Harbored 

Oiled Mudder Harbored 
Wen tutor cardboard 
Toe garter pore darker bom. 
Bud wenchy gut dare 
Door cardboard worse bar 
An soda pore dark hat known. 


Oiled Mudder Harbored 

Oiled Mudder Harbored 
Wen tutor cardboard 
Toe garter pore darker born. 

Bud wenchy gut dare 
Door cardboard worse bar 
An soda pore dark hat known. 


▲ Como mostram os exemplos acima, a combinação de 
fontes com duas estruturas diferentes não é suficiente; 
ainda é fraca. As diferenças devem ser enfatizadas. 
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É sempre difícil colocar duas fontes sem serifa em uma página, porque 
há apenas uma estrutura: o peso igual. Se você for um gênio, conseguirá 
um bom resultado colocando duas fontes sem serifa juntas se utilizar 
uma das raras fontes com transições grosso-fino em seus traços. Mas eu 
não recomendaria nem mesmo uma tentativa. No lugar de tentar combinar 
duas fontes sem serifa, crie contrastes de outras maneiras, utilizando 
diferentes elementos da mesma família sem serifa. Em geral, as famílias 
de fontes sem serifa têm lindos conjuntos de pesos suaves com pesos 
fortes e às vezes incluem uma versão compactada ou expandida (leia 
Contraste de Direção). 


Sua 
atitude 
é a sua 


VIDA 


◄ Olhe só! Duas fontes 
sem serifa juntas! Mas 
observe que cada 
fonte tem uma 
estrutura diferente; 
uma é da categoria 
moderna e a outra da 
serifada. Também 
acrescentei outros 
contrastes. Você 
conseguiria indicá-los? 


MAXIMIZE 

suas opções , 
ela diz. 


◄ Aqui temos duas fontes sem 
serifa juntas, mas note que eu 
combinei uma fonte de peso 
igual sem serifa com uma das 
únicas fontes sem serifa com 
transição grosso-fino em suas 
letras, o que confere uma 
estrutura diferente, lambém 
maximizei os contrastes usando 
letras em caixa-alta (maiusculas), 
com tamanho maior, bold e 


roman. 



M design para quem não é designer 


Forma 


◄ A qual categoria 
de tipos pertence 
esta fonte? 


A forma de uma letra refere-se ao seu formato. Os caracteres podem ter 
a mesma estrutura, mas suas "formas" podem ser diferentes. Por exemplo, 
a letra "G" (em caixa-alta) tem a mesma estrutura que a letra "g" (em caixa- 
baixa) da mesma família. Entretanto, suas verdadeiras formas - ou formatos 
— são muito diferentes entre si. Uma maneira muito fácil de compreender 
o contraste de forma é pensar em letras maiúsculas versus minúsculas. 


◄ As formas de cada uma destas 
letras maiúsculas são 
completamente diferentes das 
formas das letras minúsculas. 
Portanto, caixa-alta versus caixa- 
baixa é outra maneira de contrastar 
os tipos. Isso é algo que você já 
deve praticar, mas agora, estando 
mais consciente, poderá aproveitar 
melhor como potencial de 
contraste. 

H h 
E e 


B b 
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Além de cada letra em caixa-alta (maiuscula) ser diferente da letra 
correspondente em caixa-baixa, a forma da palavra inteira em caixa-alta 
também é diferente. Por isso as palavras em caixa-alta são tão difíceis de 
ler. Não reconhecemos as palavras somente por suas letras, mas também 
por sua forma, a forma da palavra como um todo. Todas as palavras 
digitadas em caixa-alta têm uma forma retangular similar, como mostra 
o exemplo a seguir, e somos obrigados a ler as palavras letra por letra. 

Você deve estar cansado de ouvir minhas recomendações para não usar 
caixa-alta. Não quero dizer para você nunca usar caixa-alta. As letras em 
caixa-alta não são impossíveis de se ler, é claro. Basta estar consciente de 
sua legibilidade reduzida. Às vezes podemos argumentar que a "estética" 
da diagramação de seu material justifica o uso de letras em caixa-alta e 
tudo bem! Entretanto você também deve compreender que as palavras 
não terão uma legibilidade tão fácil. Se você for capaz de constatar 
conscientemente que a estética do design compensa o baixo nível de 
legibilidade, vá em frente e use as letras em caixa-alta. 


girarãl 

tartaruga! 

GIRAFA] 

TARTARUGA 

▲ 


Cada palavra em caixa-alta tem a mesma forma: retangular 


O melhor remédio para um coração machucado não é, como muitos 
crêem, repousar sobre um peito varonil. Muito mais eficaz são o 
trabalho honesto, a atividade física e a repentina conquista da 

PROSPERIDADE. 

Dorothy L. Sayers 


A 

Em geral, o uso da caixa-alta versus a caixa-baixa (contraste de 
forma) precisa ser reforçado com outros contrastes. O tamanho é 
o único contraste diferente inserido neste exemplo. 







(SB DESIGN PARA 


QUEM 


N A O 


É 


DESIGNER 


Outro contraste nítido de forma é o uso do roman versus o itálico. Em 
qualquer fonte, o estilo roman significa simplesmente que a fonte está 
reta em suas partes superior e inferior, opondo-se ao itálico ou ao manuscrito, 
em que o tipo está inclinado e/ou flutuando. O uso de uma palavra ou 
frase em itálico, com o objetivo de enfatizá-la, é um conceito bastante 
comum que você já deve utilizar com regularidade. 


G g nerdette 
G g nerdette 

Voe para longe 
Voe para longe 


Voe para longe 
Voe para longe 


◄ A primeira linha está em 
tipo roman; a segunda 
está em itálico. Ambas 
estão na fonte Nofret; 
suas estruturas são 
exatamente as mesmas, 
mas suas formas 
(formatos) são diferentes. 

◄ Observe que a fonte em 
itálico da primeira linha 
(propositalmente 
desenhada assim) não é 
apenas uma fonte roman 
inclinada (como na 
segunda linha). As formas 
das letras foram realmente 
redesenhadas, criando 
formas diferentes. Olhe 
com atenção as 
diferenças entre o ‘a’, 

o e e o g. 

◄ Geralmente, mas não 
sempre, as fontes sem 
serifa têm versões 
“oblíquas", o que dá a 
impressão de que as 
letras foram apenas 
inclinadas. Suas formas 
em estilos roman e 
oblíquo não são tão 
diferentes entre si. 
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Já que todos os manuscritos e itálicos têm uma forma inclinada e/ou 
flutuante, é importante lembrar-se de nunca combinar duas fontes em 
itálico ou manuscritas diferentes, ou uma fonte em itálico com uma manuscrita. 
Isso criaria um conflito, pois há muitas similaridades entre elas. 




Não existe atalho. 


▲ Qual é a sua opinião sobre essas duas fontes estarem juntas? 
Há algo de errado? A combinação o faz piscar? Um dos 
problemas desta combinação é que as duas fontes têm a 
mesma forma: ambas têm um formato cursivo, flutuante. 
Uma das fontes deve ser alterada. Qual deve ser escolhida? 
(Pense sobre isso.) 


▼ Sim! Uma fonte precisa ser transformada em algum tipo de 
roman. Ao fazermos a modificação, devemos diferenciar 
completamente a estrutura da nova fonte em vez de 
colocar uma fonte com um contraste grosso-fino. Também 
podemos deixar a letra mais pesada. 


Trabalhe Muito 
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àe 

V ■ ■ V j ■ , ^ B H pertence 

.■. .■_ esta fonte? 

Uma interpretação óbvia da “direção" do tipo é sua inclinação. Já que é 
tão óbvio, a única coisa que eu gostaria de dizer é: não o faça. Bem, às 
vezes você pode querer fazê-lo, mas só o faça se puder explicar em 
palavras por que um determinado tipo deve estar inclinado, por que ele 
melhora a estética ou a comunicação do material. Talvez você possa 
dizer: "Este título anunciando a corrida de barcos deveria realmente ficar 
com um ângulo mais à direita, pois este ângulo criaria uma energia positiva 
na página"; ou "A repetição deste tipo inclinado cria um efeito de separação 
de notas que enfatiza a energia da composição de Bartok que estamos 
anunciando". E — por favor! — nunca coloque um tipo inclinado nos 
cantos do seu material. 




◄ O tipo inclinado para cima 
cria uma energia positiva. O 
tipo inclinado para baixo cria 
uma energia negativa. Você 
pode utilizar essa conotação 
ocasionalmente, para tirar 
vantagem dela em seus 
materiais. 

M Às vezes um 
redirecionamento marcante 
do tipo cria um impacto 
dramático ou um formato 
único, o que justifica 
plenamente seu uso. 
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Mas existe outra interpretação de direção. Cada elemento do tipo tem uma 
direção, mesmo que ela seja reta na página. Uma linha do tipo tem uma 
direção horizontal. Uma coluna alta e fina tem uma direção vertical. Esses 
movimentos direcionais do tipo são engraçados e interessantes na criação 
de contrastes. Por exemplo, uma página dupla com um título em bold 
(negrito) ocupando as duas páginas e o texto corrido distribuído em uma 
série de colunas finas cria um contraste direcional interessante. 



Experiência 


A experiência 
ensina 

a reconhecer 
um erro 
quando 
você o 
comete’ 
novamenle 


■4 Se você tiver um layout com 
potencial para a criação de 
contrastes ou de 
direcionamentos, enfatize 
esse potencial. Você pode 
usar uma fonte expandida na 
direção horizontal e uma 
fonte mais alta na direção 
vertical. Enfatize o espaço 
vertical aumentando a 
entrelinha, se for apropriado, 
e com as colunas mais 
estreitas do que as que você 
tiver planejado inicialmente. 




BE DESIGN PARA 


QUEM 


N A O 


É 


DESIGNER 


Você pode envolver outras partes do seu layout no contraste da direção 
do tipo, como figuras ou linhas, para enfatizar ou contrastar a direção. 


« 

c 

0 1 

L ] 

P 0 

D 

0 

C E N T 

E 

Lorem lpsum dolor slt amet fur gravenstein, pro lipsum dlctrep amesterpan et pliscudd, t&k dropreim em. 


* 


r 


H 

t 




A 



Nome do 
professor 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 


bibliografia 

bibliografia. 

bibliografia 

bibliografia. 

bibliografia 

bibliografia. 
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f 


ffi 





* 



Nome do 
professor 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 


bibliografia. 

bibliografia. 

bibliografia 

bibliografia. 

bibliografia 

bibliografia. 


§1 


♦ 


[f 

1 


t 





Nome do 
professor 

Nome do 
professor 

Nome do 

Nome do 
professor 

Nome do 
professor 

Nome do 
professor 


bibliografia 

bibliografia. 

bibliografia 

bibliografia. 

bibliografia 

bibliografia. 


▲ Elementos horizontais e colunas altas e finas podem ser 
combinados em infinitas variedades de layouts elegantes. 
O alinhamento é um fator-chave neste caso; 
alinhamentos visuais fortes enfatizarão e reforçarão os 
contrastes de direção. 
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No exemplo a seguir há um contraste de direção simpático e forte. Mas 
quais foram os outros contrastes também utilizados para fortalecer o 
material? Foram aplicadas três fontes diferentes na diagramação. Por que 
elas ficaram interessantes quando colocadas juntas? 

Observe também a textura criada a partir das estruturas das várias fontes, 
o espaço entre as letras, o tamanho, a forma. Se as letras estivessem em 
alto relevo e se você pudesse passar os dedos sobre elas, cada contraste 
de tipo também criaria um contraste de textura (você poderia "sentir" 
esta textura visualmente. Esta é uma parte sutil — mas importante — do 
tipo. Diversas texturas aparecerão automaticamente quando forem utilizados 
outros contrastes, mas é importante conhecê-las e saber quais os resultados 
de sua utilização no material. 


► 

Dedique alguns minutos para 
colocar em palavras por que 
estas três fontes combinam 
quando colocadas juntas. 

Se você escolher uma fonte 
moderna em caixa-alta 
(maiusculas) no título, qual 
seria a opção mais lógica 
para o texto corrido? 

Se você tivesse optado por uma 
fonte moderna no subtítulo, 
qual seria a opção lógica 
para o título? 


WILLIAM 

Bt dolor nagna 
aUquam erat vol 
up&t. At enlzn ad 
mlnlmlm to venl 
ami quis or nos 
trud exers clta- 
tlons tulla mcor 
per sus crowipit 
I&boris nlsi ut al 
qulp ex ea com 
mod cons equat. 

Duls autem el 
eum irure dolor 
in rep rehend 
erit ln voluptate 
vellt esse moles 
tale son consw 
quat, vely lllum 
dolore en gulat 
nulla pariatur. 

At vero esos 
eth accusam et 
Justfo rum odlo 
dls nissimy qul 
blande dlt pra 
esent lupatum 
dei enit aigue 
duos redolor et 
mol estais ex 
ceptur astnt. EU 
eum Irure dolor 
ln rep rehend er 
ln voluptate. 


SHAKESPEARE 

SE FOI DITO EM 
INGLÊS, 
SHAKESPEARE 
O DISSE 
MELHOR. 
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◄ A qual 
categoria de 
tipos pertence 
esta fonte? 


A cor é mais um termo — como direção — com interpretações óbvias. A 
única coisa que eu gostaria de mencionar sobre o uso das verdadeiras 
cores é que você deve se lembrar de que as cores quentes (vermelhos, 
laranjas) vêm na frente e comandam nossa atenção. Nossos olhos são 
muito atraídos pelas cores quentes, de maneira que o vermelho cria facilmente 
um contraste. Por outro lado, as cores frias (azuis, verdes) desaparecem 
gradualmente diante dos nossos olhos. Grandes áreas de cores suaves são 
ótimas; na verdade, elas são necessárias para criarmos um contraste eficaz. 

(Este livro é preto e branco assim, teremos de simular as cores na página. Alas a “verdadeira " 
cor não é o assunto desta seção.) 




FLORENCE 



FLORENC 


FLORENCE 


◄ Pinte “Scarlett” de vermelho 
com uma caneta. Observe 
que mesmo que o nome 
“Scarlett” seja 

consideravelmente menor; ele 
é dominante devido à 
aplicação da cor quente. 

◄ Pinte “Florence” de 
vermelho. Agora o nome 
maior na cor quente se 
sobrepõe ao nome menor. 
Em geral, este é um efeito 
que deve ser evitado. 


◄ Pinte “Scarlett” de azul 
claro. Veja como o 
nome praticamente 
desaparece. 



FLORENCE 


◄ Pinte "Florence” de azul 
claro. Geralmente, para 
que o contraste com 
uma cor fria realmente 
crie o efeito desejado, é 
preciso usá-la em maior 
quantidade. 


Scarlett Florence é o nome da minha filha. 
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Curiosamente os tipógrafos sempre se referiram ao tipo em preto e branco 
de uma página como um tipo "colorido". E fácil criar um contraste com 
várias cores; apenas os olhos mais sofisticados veêm e aproveitam os 
contrastes de cor em preto e branco. 


Assim como a voz enfatiza palavras 
importantes, o tipo também pode fazê-lo: 

ele grita ou sussurra através 
da variação de tamanho. 

Assim como o tom da voz confere interesse 
às palavras, o tipo também pode fazê-lo: 

ele se modula através de 
tons mais luminosos ou mais 
escuros. 

Assim como a voz colore as palavras 
através da inflexão, o tipo também pode 
fazê-lo: 

ele define a elegância, a 
diginidade e a obstinação 
pela escolha do estilo. 


<4 Nesta citação, 
podemos visualizar 
facilmente as “cores” 
diferentes no texto em 
preto e branco. 

A “cor” é criada através 
de variações como o 
peso das letras, a 
estrutura, a forma, o 
espaço existente no 
interior das letras, o 
espaço entre as linhas, 
o tamanho do tipo ou 
o tamanho da altura do 
x. Mesmo utilizando um 
único estilo para o 
mesmo tipo é possível 
criar “cores” diferentes. 


hm V. White 
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Uma fonte suave, arejada, com bastante espaço entre as letras (conhecido 
como entreletra) e entre as linhas (conhecido como entrelinha) cria uma 
“cor” e uma textura bastante suaves. Uma fonte em bold (negrito) e sem 
serifa, pouco arejada, cria uma cor escura, com uma textura diferente. 
Este é um contraste particularmente útil na montagem de páginas com 
muita massa de texto e sem figuras. 

Uma página cinza, formada apenas por texto, pode ter uma aparência 
desinteressante que, além de não incentivar a leitura, cria confusão. No 
exemplo a seguir as duas histórias estão ou não relacionadas? 


Lorem Ipsum Dolor 


Lorem ipsum dolor sic amet, 
conscctetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ui 
laoreet dolore magna aliquam crat 
volutpat. Ut wisi emm ad minim 
veniam. quis nostrud exerci lation 
ullamcorper suscipic lobortis msl ut 
aliquip ex ea commodo consequat. 

Duts autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore cu 
feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril delemt 
augue duis dolore te feugait nulla 
facilisi. Lorem ipsum dolor sit amet, 
conscctetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut. 

Laoreet dolore magna aliquam crat 
volutpat. Ut wisi enim ad minim 
veniam, quis nostrud exerci tation 
aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et 
accumsan 

Et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue 
duis dolore te feugait nulla faciltsi. Nam 
libcr tempor cum soluta nobis eleifend 
option congue nihil imperdiet domtng 
id quod mazim placerat facer possim 
assum. 

Lorem ipsum dolor sit amet, 
conscctetuer adipiscing elit, sed diam 


nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim 
ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore 
et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril 
delenit augue duis dolore te feugait 
nulla facilisi. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed 
tincidunt ut laoreet dolore magna 
aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper 
suscipit lobortis nisl ut aliquip ex ea 
dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio 
dignissim qui blandit praesent lupt 
delenit augue duis dolore te feugait 
nulla facilisi. Lorem ipsum dolor sit 
amet. consectetuer adipiscing elit, sed 
diam nonummy nibh euit ut laoreet 
dolore magna aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper I 
suscipit lobortis nisl. erat 

Mural: Autem vel eum iriure dolor 
in henfrerit in vulputate velit esse 
molestie consequat, vel. 

- H.Chess 
Lorem Ipsum Dolor Sit 


O Velho Singleton 
.. .Singleton estava parado na porta, 
com seu rosto voltado para a luz e 
suas costas para a escuridão. Sozinho 
no vazio escuro do castelo de proa 
ele parecia maior, colossal, muito 
velho; velho como o próprio Pai 
Tempo, que deveria ter visitado este 
lugar tão silencioso quanto um 
sepulcro para contemplar com olhos 
pacientes a pequena vitória do sono, 
que tudo consola. Ainda assim, ele 
era apenas uma criança do tempo, 
uma relíquia solitária de uma geração 
devorada e esquecida. Ele estava 
parado, ainda forte como nunca; um 
homem pronto, com um vasto passado 
vazio e sem futuro, com seus impulsos 
infantis e com suas paixões adultas 
já mortas dentro de seu peito tatuado. 

" Joseph Conrad 


▲ Esta é uma página comum de um newsletter 
ou de outro tipo de material. A monotonia do 
cinza não atrai os olhos. 
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COR BE 
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Se você acrescentar "cor" aos títulos e subtítulos, com um peso mais 
marcante, ou se colocar uma citação, uma passagem ou uma pequena 
história utilizando uma "cor” nitidamente diferente, os leitores ficarão 
mais predispostos a olhar para a página e lê-la efetivamente. E este é 
exatamente o nosso objetivo, certo? 

Além de fazer com que a página fique mais interessante para a leitura, esta 
mudança de cor também ajuda a organizar as informações. No exemplo a 
seguir fica claro que existem duas histórias independentes na mesma página. 


Lorem Ipsum Dolor 


Lorem ipsum dolor sir amet, 
consectctucr adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut 
laorcet dolore magna aliquam erat 
volutpat. Ur wisi enim ad minim 
veniam, quis nosirud exerci tation 
ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in 
hendrcrit in vulputate velit esse 
molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et 
accumsan et iusto odio dignissim qui 
blandit praesent luptatum zzril dclenit 
augue duis dolore te feugait nulla 
facilisi. Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut. 

Laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim 
veniam, quis nostrud exerci tation 
aliquip ex ea commodo consequat. 

Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et 
accumsan 

Et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue 
duis dolore te feugait nulla facilisi. Nam 
liber tempor cum soluta nobis eleifend 
option congue nihil imperdiet doming 
id quod mazim placerat facer possim 
assum. 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam 


nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim 
ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. 
Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse 
molestie consequat, vel illum dolore 
et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril 
delenit augue duis dolore te feugait 
nulla facilisi. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed 
tincidunt ut laoreet dolore magna 
aliquam erat volutpat. 

Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper 
suscipit lobortis nisl ut aliquip ex ea 
dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio 
dignissim qui blandit praesent lupt 
delenit augue duis dolore te feugait 
nulla facilisi. Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed 
diam nonummy nibh cuit ut laoreet 
dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper 
suscipit lobortis nisl. erat 

Mural: Autem vel eum iriu¬ 
re dolor In henfrerit in 
vulputate velit esee mole- 
etie consequat, vel. 

H.Ofis 
Lorem Ipsum Dolor Sit 


O Velho Singleton 

... Singleton «atava parado na 
porta, com aau rosto voltado 
para a luz a auaa coataa poro 
a escuridão. Sozinho no vazio 
■acuro do caatalo da proa ale 
parecia maior, colossal, multo 
valho; valho como o próprio 
Pai Tampo, que deveria ter 
vieitado este lugar tão silen¬ 
cioso quanto um sepulcro, para 
contemplar com olhos pacie¬ 
ntas a pequena vitória do sono, 
que tudo consola. Ainda aaaim, 
ele era apanaa uma criança 
do tempo, uma relíquia solltãrie 
de uma geração devorada e 
esquecida. Ele eetava parado, 
ainda forte, como nunca; um 
homem pronto, com um vaeto 
passado vazio e sem futuro, 
com eeus impulaoa infantia e 
com euas paixões adultas já 
mortas dentro de eeu peito 
tatuado. 

- Joseph Conrad 


▲ Este é o mesmo layout, mas com inserção 
de “cores". Olhe novamente os exemplos 
da página 103: o contraste de peso na 
página cria uma variação de cores. 








EQ] DESIGN 


PARA QUEM 


NÃO É 


DESIGNER 


A seguir, note como podemos mudar 
fazendo ajustes mínimos. 

a cor através da fonte ou do tamanho 

Center Alley worse jester pore ladle 
gull hoe lift wetter stop-murder an toe 
heft-cistems. Daze worming war furry 
wicket an shellfish parsons, spatially 
dole stop-murder, hoe dint lack 

Center Alley an, infect, word orphan 
traitor pore gull mar lichen ammonol 
dinner hormone bang. 

◄ Nofret Light, 8 pontos, 
entrelinha 9,6. 

Center Alley worse jester pore ladle 
gull hoe lift wetter stop-murder an 
toe heft-cistems. Daze worming 
war furry wicket an shellfish 
parsons, spatially dole stop-murder, 
hoe dint lack Center Alley an. 

■4 Nofret Light, 8 pontos, 
entrelinha 12, entreletra 
adicional. Observe que o texto 
tem uma cor mais suave do 
que a do exemplo anterior. 

Center Alley worse jester pore ladle gull hoe 
lift wetter stop-murder an toe heft-cistems. 

Daze worming war furry wicket an 
shellfish parsons, spatially dole stop- 
murder, hoe dint lack Center Alley an, 
infect, word orphan traitor pore gull 

4 Nofret Light Italic, 8 pontos, 
entrelinha 12, entreletra adicional. 
Este exemplo é exatamente igual 
ao anterior; exceto pelo uso do 
itálico. Já se vê uma cor e uma 
textura diferentes. 

Center Alley worse jester pore ladle 
gull hoe lift wetter stop-murder an 
toe heft-cistems. Daze worming 
war furry wicket an shellfish 
parsons, spatially dole stop-murder, 
hoe dint lack Center Alley an, 
infect, word orphan traitor pore 

◄ Nofret Regular, 8 pontos, 
entrelinha 9,6. Este exemplo é 
exatamente igual ao primeiro, 
exceto por sua versão regular e 
não em light. 

Center Alley worse jester 
pore ladle gull hoe lift 
wetter stop-murder an toe 
heft-cisterns. Daze worming 
war furry wicket an shell¬ 
fish parsons, spatially dole 
stop-murder, hoe dint lack 

◄ Nofret Bold, 8 pontos, entrelinha 
9,6. Este exemplo é exatamente 
igual ao primeiro, exceto por sua 
versão em bold e não em light. 
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Estes são apenas alguns exemplos básicos da diferenciação de cores, sem 
as manipulações adicionais que podem ser feitas para mudar a cor natu¬ 
ral de um tipo. A maioria dos bons catálogos de tipos apresenta uma 
ampla variedade de fontes em blocos de texto, para que você possa visualizar 
a cor e a textura na página. O catálogo ideal de um representante deve 
apresentar cada fonte (bold, itálico, regular, light etc) em um bloco de 
texto, para que você possa fazer comparações de cores. 


Center Alley worse jester pore 
ladle gull hoe lift wetter stop- 
murder an toe heft-cisterns. 
Daze worming war furry wicket 
an shellfish parsons, spatially 
dole stop-murder, hoe dint lack 
Center Alley an, infect, word 


Center Alley worse jester pore ladle gull 
koe lift wetter stop-murder an toe keft- 
cistems. Daze worming war furry wicket 
an skellfisk parsons, spatially dole stop- 
murder, Koe dint lack Center Alley an, 
in íect, word orpkan traitor pore gull mar 
licken ammonol dinner kormone kang. 


▲ American lypew riter, 8/10 A Bernhard, 8/10 


Center Alley worse jester pore 
ladle gull hoe lift wetter stop- 
murder an toe heft-cisterns. 
Daze worming war furry wicket 
an shellfish parsons, spatially 
dole stop-murder, hoe dint lack 
Center Alley an, infect, word 
orphan traitor pore gull mar 
lichen ammonol dinner hormone 

A Imago, 8/10 


Center Alley worse jester pore ladle gull 
hoe lift wetter stop-murder an toe heft- 
cisterns. Daze worming war furry 
wicket an shellfish parsons. spatially 
dole stop-murder, hoe dint lack Center 
Alley an. infect. word orphan traitor 
pore gull mar lichen ammonol dinner 

A Photina, 8/10 


Center Alley worse jester pore 
ladle gull hoe lift wetter stop- 
murder an toe heft-cisterns. Daze 
worming war furry wicket an 
shellfish parsons, spatially dole 
stop-murder, hoe dint lack Center 
Alley an, infect, word orphan 
traitor pore gull mar lichen 
ammonol dinner hormone bang. 

A Memphis Médium, 8/10 


Center Alley worse jester 
pore ladle gull hoe lift 
wetter stop-murder an toe 
heft-cisterns. Daze worm¬ 
ing war furry wicket an 
shellfish parsons, spatially 
dole stop-murder, hoe dint 

A Eurostile Extended, 8/10 




SE design para quem não é designer 


Combine os contrastes 


Não tenha medo. Os bons layouts fazem uso de mais de uma das ferramentas 
de contraste. Por exemplo, se você estiver combinando duas fontes serifadas, 
cada uma delas com uma estrutura diferente, enfatize suas diferenças 
contrastando também sua forma. Se um elemento estiver em letras do 
tipo roman, caixa-alta (maiusculas), coloque o outro em itálico, caixa- 
baixa (minúsculas). Contraste os tamanhos e o peso também; contraste, 
talvez, até a direção. Dê uma olhada novamente nos exemplos desta 
seção. Cada um deles contém mais de um princípio de contraste. 

Para conhecer uma ampla variedade de exemplos e idéias, procure em 
qualquer revista de boa qualidade. Observe que cada um dos layouts 
interessantes depende dos contrastes aplicados aos tipos. Os subtítulos 
ou capitulares iniciais enfatizam o contraste de tamanho e o de peso; em 
geral, costuma haver um contraste de estrututa (serifa versus sem serifa) e 
também de forma (caixa-alta versus caixa-baixa). 

Tente verbalizar o que você visualiza. Se você puder transmitir em palavras a 
dinâmica da relação, já a dominará. Quando você olha para uma combinação 
de tipos que o faz piscar, porque você possui uma noção instintiva de 
que as fontes e os estilos não combinam, ponha sua conclusão em palavras. 

Antes de tentar encontrar uma solução melhor, é preciso descobrir o problema. Qual é 
a eficácia do contraste de peso, de tamanho, de estrutura? Para descobrir 
o problema, tente classificar as similaridades e não as diferenças. O que 
existe entre as duas fontes que faz com que elas criem uma estética de 
"disputa" na página? Ambas estão em caixa-alta? Ambas possuem um 
forte contraste grosso-fino em seus traços? 

Será que os conflitos de foco (por exemplo, o tipo maior está com um 
peso mais suave e o menor está com um peso mais bold ) estão fazendo com 
que os tipos "briguem" entre si, por que cada um deles quer ser mais 
importante do que o outro? 

Dê nome ao problema para depois criar a solução. 
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A seguir apresento uma lista dos contrastes que expliquei. É aconselhável 
ter esta lista à mão para quando você precisar fazer uma pesquisa rápida. 


T 

\amar\ho 

◄ Não seja tfmido. 

Peso 

◄ Contraste os pesos mais 
fortes com os mais suaves 
e não com os medianos. 

Estrutura 

◄ Observe a construção das 
letras: o peso é igualmente 
distribuído ou ele passa de 
grosso a fino. 

l5orma 

◄ Caixa-alta X caixa-baixa é um 
contraste de forma. Também 
a fonte em roman X itálico ou 
manuscrito. Estilos manuscritos 
ou itálicos têm formas similares: 
não os combine. 



▲ Pense mais em termos do tipo horizontal X colunas de texto 
altas e estreitas e não em termos de inclinação dos tipos. 


COR 


◄ Cores quentes vêm em primeiro 
lugar; cores frias desaparecem 
gradualmente. Faça testes com 
as “cores" de texto em preto. 
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Desafio n° 6: contraste ou conflito _ 

Observe com atenção cada um dos exemplos a seguir. Responda se as 
combinações entre os tipos se contrastam efetivamente ou se há um 

conflito Explique por que a combinação das fontes funcionou (procure 
pelas diferenças) ou por que não funcionou (procure pelas similaridades). 
Desconsidere as palavras propriamente ditas; não é preciso avaliar se a 
fonte é apropriada para o produto que ela representa já que este é outro 
assunto. Basta observar as fontes. Se este livro for seu, faça um círculo ao 
redor das respostas corretas. 


contrastes PERFUME 

conflitos iíJXmOSÚ 


contrastes 

conflitos 



contrastes 

conflitos 


MINHA MÃE 

Este é um texto sobre as razões pelas quais 
minha mãe sempre será a melhor mãe 
cio mundo... até que eu me torne um 
adolescente. 


contrastes FAZENDA ENGRAÇADA 

conflitos Seguro-Saúde 


vamosDANCAResta noite 

M 


conflitos 
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Desafio n° 7: certo ou errado _ 

Em vez de trabalharmos apenas com certo ou errado, deixarei que você 
decida o que deveria e o que não deveria ser feito. Circule as respostas 
corretas. 


1 Certo Errado 

2 Certo Errado- 

3 Certo Errado* 

4 Certo Errado 

5 Certo Errado 

6 'Certo Errado 

7 Certo Errado* 

8 Certo Errado* 

9 Certo Errado 

10 * Certo Errado 


Utilize duas fontes manuscritas na mesma 
página. 

Utilize duas fontes modernas, sem serifa, em 
estilo antigo ou serifadas na mesma página. 

Enfatize de dois elementos tipográficos de uma 
mesma página colocando um em negrito e 
outro em corpo maior. 

Utilize uma fonte manuscrita e uma em itálico 
na mesma página. 

Se uma fonte for alta e fina, escolha outra 
menor e mais espessa. 

Se uma fonte tiver fortes transições grosso- 
fino, escolha uma sem serifa ou serifada. 

Se você utilizar uma fonte bastante diferente e 
decorativa, encontre outra que chame atenção 
para complementá-la. 

Use os tipos para criar uma diagramação 
extremamente interessante, mas ilegível. 

Lembre-se dos quatro princípios básicos de 
design quando trabalhar com os tipos em 
qualquer material. 

Quebre as regras, uma vez que você for capaz de 
classificá-las. 
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Um exercício sobre a combinação de contrastes 

Aqui vai um exercício divertido e fácil de fazer que o ajudará a aperfeiçoar 
suas habilidades tipográficas. Você só vai precisar de papel vegetal, uma 
caneta ou um lápis (os pequenos marcadores coloridos são ótimos para 
esta atividade) e uma ou duas revistas. 

Copie da revista (utilizando o papel vegetal) qualquer palavra que você 
tenha achado interessante. Agora encontre outra que crie um contraste 
efetivo com a que você copiou primeiro. Neste exercício, as palavras são 
completamente irrelevantes; você só estará trabalhando com a forma das 
letras. A seguir, um exemplo da combinação de três fontes que copiei de 
uma revista. 

◄ A primeira palavra que eu copiei foi 
“hawk". Depois, nem precisei procurar 
pelas fontes sem serifa. A palavra 
“Rebate" tem uma forma 
completamente diferente de “hawk" e 
eu precisava de algo menor e mais 
leve, com uma estrutura diferente, para 
compor a terceira fonte. 

Copie a primeira palavra e, depois, decida de maneira consciente e verbal 
sobre o que você necessitará para combinar com esta palavra. Por exemplo, 
se a primeira palavra ou frase for escrita em alguma fonte sem serifa, 
você já sabe que qualquer escolha a seguir não poderá ser sem serifa, 
certo? Do que você precisa? Organize suas opções de maneira consciente. 

Faça testes com algumas combinações de palavras; depois, tente outros 
projetos, como a capa de um relatório, um conto em uma página com 
um título interessante, o título principal de um newsletter, a capa de uma 
revista, um anúncio ou qualquer coisa que você queira. Utilize algumas 
canetas coloridas. Lembre-se de que as palavras não precisam ter sentido. 

A vantagem de fazer esse exercícios com revistas é que nelas há inúmeras 
fontes que você não deve ter em seu computador. Será que isso fará com 
que você corra para comprar mais fontes? Sim. 



market timerbig 



PARTE TRÊS ! EXTRAS \Sü 

Então, você 
entendeu? 


Agora tudo faz sentido para você? Uma vez que conseguimos as coisas, 
tudo parece tão simples, não é verdade? Não demorará muito para você 
nem precisar parar para pensar sobre como contrastar os tipos; você 
escolherá a fonte certa automaticamente. Se você tiver, é claro, a fonte 
certa em seu computador. Hoje em dia as fontes são bastante baratas e 
você só precisará de algumas famílias para poder fazer todos os tipos de 
combinações dinâmicas. Escolha uma família de cada categoria, mas certifique- 
se de que a família de fontes sem serifa que você escolher tenha uma 
opção em negrito bem pesado (chamada de black) e uma bem leve (light). 

Vá em frente e... divirta-se! 
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O processo 

Por onde começar para criar ou recriar o design de algum material? 

Comece pelo ponto principal. Decida o que você deseja que os leitores 
visualizem primeiro. Crie seu ponto focal (o principal) através de contrastes 
fortes, a não ser que você tenha optado por um design muito concordante. 

Agrupe suas informações em conjuntos lógicos e estabeleça as relações 
entre esses conjuntos. Apresente essas relações através da aproximação 
ou do distanciamento (proximidade) entre os conjuntos. 

Quando você diagramar o texto e as figuras na página, crie e mantenha 
alinhamentos fortes. Se você visualizar uma lateral marcante, como 
uma foto ou uma linha vertical, reforce-a com alinhamentos de outros 
textos ou objetos. 

Crie uma repetição ou encontre itens que possam ter uma conexão 
repetitiva. Utilize uma fonte em bold (negrito), um fio (uma linha), um 
dingbat ou uma disposição espacial. Observe o que já se repete naturalmente 
e decida se seria apropriado reforçar esse elemento. 

Certifique-se de criar contrastes marcantes, que atrairão o interesse do 
leitor, exceto se você optar pela criação de um design concordante. Lembre- 
se: contraste é contraste. Se tudo em uma página for grande, bold e chamativo, 
não haverá contraste! Qualquer que seja o contraste (maior e em negrito, 
ou menor e mais leve), o importante é a diferença existente entre os elementos 
da página, para que seus olhos sejam atraídos para a leitura. 




UM EXERCÍCIO 


1 0 


\ 


Um exercido 

Abra um jornal ou as Páginas Amarelas. Encontre um anúncio que você 
sabe que está mal-diagramado (principalmente agora, que você já é uma 
pessoa visualmente consciente!). Tenho certeza de que não será difícil 
encontrar um anúncio assim. 

Pegue um pedaço de papel vegetal e copie o contorno do anúncio (não 
vale aumentá-lo!). Depois, desloque o papel e copie as outras partes do 
anúncio, mas colocando-as onde você achar realmente adequado e certi¬ 
ficando-se de que o ponto focal seja realmente o de interesse principal. 
Passe o que estiver em letras maiúsculas (caixa-alta) para minúsculas 
(caixa-baixa), coloque alguns itens em bold (negrito), diminua alguns, aumente 
outros, livre-se de todas as tranqueiras que possam poluir a estética do 
material. 

Dica: quanto mais caprichado for o seu trabalho, melhor será o resultado. 
Se você fizer apenas rabiscos, seu material alterado não ficará melhor do 
que o anterior. 


(Vou revelar um truque que sempre usei em minhas 
aulas de design gráfico: sempre que você tiver um 
cliente que insista em trabalhar com seu próprio 
estilo poluído de diagramação e que não queira 
pensar com seriedade a respeito de um trabalho 
mais sofisticado, finalize o design deste cliente 
piorando e bagunçando um pouco mais o que ele 
já fez. Jogue café sobre o material, amasse as pontas 
do papel, deixe a caneta borrar, não alinhe os 
elementos etc. No caso das opções mais interessantes, 
execute-as de maneira limpa, sobre um ótimo papel, 
monte-as em um papel como o color-plus, cubra- 
as com papel vegetal etc. Na maior parte das vezes 
o cliente refletirá e conlcuirá que seu trabalho 
realmente está melhor do que o conceito original 
criado por ele, e já que ele é um PVA* — que você 
não é mais! —, não poderá dizer por que o trabalho 
dele já não parace tão bom. Sua impressão será a 
de que o seu está melhor. E não conte para ninguém 
que eu estou lhe dando este conselho! 


PVA: pessoa visualmente analfabeta 




El DESIGN para quem não é designer 


OK. Redesenhe! 

Você se lembra deste pequeno pôster no anúncio da página 25? Ele não está 
tão ruim assim, mas é preciso fazer algumas modificações. Poucas e simples 
mudanças farão toda a diferença. O maior problema é a falta de um alinhamento 
marcante, além de haver muitos elementos diferentes competindo pelo ponto 
focal. Utilize um papel vegetal para reorganizar os elementos ou faça um 
esboço de algumas versões nesta página mesmo. 



Você quer participar de um verdadeiro desafio? Em vez de somente pensar 
a respeito, tente efetivamente redesenhar o anúncio do desafio da página 
69. Não olhe ainda, mas existe uma boa solução na página 155. 







Soluções 
dos desafios 


Como professora universitária, todos os desafios, testes e projetos que eu 
faço são abertos para discussão ou consulta. Os estudantes sempre podem 
utilizar suas anotações e livros, podem conversar entre si comigo. Minha 
experiência como aluna de centenas de cursos universitários na faculdade 
de ciências e depois na de design mostrou que eu estaria mais predisposta 
a absorver as informações corretas se eu as anotasse. No lugar de tentar 
adivinhar e escrever uma resposta errada, o processo de descoberta da 
resposta correta em um teste era muito mais produtivo. Portanto, aconselho 
você a rever quantas vezes for necessário os desafios e as respostas, a 
discuti-los com os amigos e, principalmente, a fazer as mesmas questões 
a outras páginas que você encontrar pelo caminho. A chave para tornar- 
se visualmente mais instruído é ficar de "olhos abertos". 
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Soluções: Desafio n° 1 (página ó8) 

Remova o contorno para deixar mais espaço. Os iniciantes tendem a colocar bordas 
ao redor de qualquer coisa. Pare! Deixe o material mais arejado; não coloque 
amarras tão fortes! 

Proximidade: 

Os títulos estão muito distantes de seus itens correspondentes: aproxime-os. 
Há retornos de carro duplos acima e abaixo dos títulos: elimine todos os retornos 
de carro duplos, mas acrescente algum espaço adicional acima dos títulos para que eles 
fiquem mais conectados ao elemento a seguir, com o qual se relacionam. 

Separe as informações pessoais dos itens do Curríado utilizando um pequeno espaço adicional. 

Alinhamento: 

O texto está centralizado e alinhado à esquerda, e as segundas linhas do texto 
passam completamente para a lateral esquerda: crie um alinhamento forte à 
esquerda; todos os títulos, todos os sinais de tópico, todo o texto, enfim, tudo se alinha; as 
segundas linhas do texto são alinhadas com as primeiras. 

Repetição: 

Já existe a repetição do hífen; reforce essa repetição criando um sinal de tópico mais 
interessante e utilizando-o antes de cada item apropriado. Já existe a repetição nos 
títulos: reforce essa repetição deixando os títulos mais fortes e escuros. 

A impressão forte do preto existente nos sinais de tópico se repete e reforça o prelo forte dos 
títulos. 

contraste: 

Não há contraste: utilize uma fonte forte, bold, para contrastar os títulos, incluindo 
“Curriculum" (para criar uma consistência ou repetição); acrescente contraste usando sinais de 
tópico marcantes. 

A propósito: todos os números da nova versão estão com um ponto a menos 
no tamanho, para que não chamemos atenção demais sobre eles. 


Soluções: Desafio n° 2 (página 69) 

Fontes diferentes: há quatro fontes sem serifa (Helvética, Avant Garde, 
Óptima e Formata Bold). Há duas fontes serifadas (Aachen Bold e New Century 
Schoolbook). Escolha duas delas: uma com um bold forte e bonito (como a 
Aachen Bold) e uma sem serifa. 

Alinhamentos diferentes: meu Deus! Alguns elementos estão alinhados à 
esquerda, alguns estão centralizados, alguns estão centralizados no meio de um 
espaço vazio, alguns não estão conectados e não estão alinhados com nada 
neste mundo. 

Linha marcante: as figuras das cerâmicas poderiam criar uma linha sólida de 
alinhamento para os outros elementos. 

Falta de proximidade: agrupe as informações. Você sabe o que deve ser agrupado. 
Falta de ponto focal: vários itens estão competindo pela atenção. Escolha um. 
Falta de elementos repetitivos: que tal reforçar os sinais de tópico, 
incluindo o que está entre as palavras cerâmica e linóleo? Talvez você possa 
utilizar um sinal de tópico quadrado para repetir a figura quadrada da 
cerâmica. Repita a fonte em bold no grande número de telefone, já que este é 
um anúncio que se encontra em uma lista telefônica. 

Remova o contorno que está dentro do contorno. Utilize contornos quadrados 
no contorno remanescente, para reforçar os cantos quadrados da cerâmica e 
para que esses cantos não fiquem poluídos demais. 

SOLTE A TECLA CAPS LOCKÜ! 

O exemplo a seguir é apenas uma dentre inúmeras possibilidades! 
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Ancient City 

Cerâmicas e Interiores 

Próximo a Sant'Ana 

Preços de atacado para o público 


Cerâmica e Linóleo: 

Talavera 
Saltillo 
Monterrey 
Cerâmica Dallas 
Asteca 
Midstate 
Mármore de qualidade 

Grande opção de cerâmicas 
no show-room 

QA9.79IQ 

D ™ K H Estacionamento no 

1776 Cupertino Road mo-?."™ 

(próximo à escola e à Easy Print) sábldo ’ 9™ -13™ 



◄Desenhe 

linhas 

ao 

longo 

de 

todos 

os 

cantos, 

que, 

agora, 

se 

alinham. 


Soluções: Desafio n° 3 (página 91) 


Estilo antigo: Como posso me lembrar. Adam! 


Moderno Alta Sociedade 

Serifa grossa: () enigma continua 
Sem sen l.i É sua atitude 

Manuscrito: Sem Palavras 

Decorativo: No Rodeio 



Soluções: Desafio 

Soluções: Desafio n° 5 

n° 4 (página 92) 

(página 93) 


Higgle: B 

Higgle: 

C 

Piggle: C 

Piggle: 

A 

Wiggle: A 

Jiggle: 

B 

Jiggle: A 

Wiggle: 

D 

Diggle: C 

Diggle: 

D 

Giggle: B 

Giggle: 

A 
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Solu ções: Desafio n° 6 (página 124) 


Perfume cheiroso: 


Comida para cães: 


Minha mãe: 


Conflito. Há muitas similaridades; ambas estão em caixa-alta 
(maiusculas); ambas têm o mesmo tamanho; ambas são fontes 
muito detalhadas, enfeitadas demais; têm pesos similares. 
Contraste. Há um forte contraste de tamanho, cor, forma 
(caixa-alta versus caixa-baixa; roman versus itálico), de peso e de 
estrutura. (Apesar de nenhuma das fontes ter um contraste 
grosso-fino definido em seus traços, as duas são definitivamente 
construídas a partir de bases completamente diferentes.) 
Conflito. Apesar de haver um contraste de forma na utilização 
de texto em caixa-alta e em caixa-baixa, existem várias 
similaridades conflitantes. As duas fontes são do mesmo 
tamanho, com pesos parecidos, com a mesma estrutura e a 
mesma forma (roman). Fica muito confuso. 


Fazenda engraçada: Conflito. Esse exemplo tem potencial, mas as diferenças devem 
ser mais enfatizadas. Há um contraste de forma no uso das 
letras em caixa-alta e em caixa-baixa, assim como na fonte 
expandida versus a fonte regular. Existe um pequeno contraste 
de estrutura na fonte que contém uma suave transição grosso- 
fino e a outra que tem letras expandidas com peso igual. Você 
conseguiria apontar o maior problema? (Pense por alguns 
instantes.) Qual é o principal ponto neste caso? "Seguro Saúde" 
está tentando atrair a atenção, por ter um tamanho maior, mas 
está em uma fonte leve. "Fazenda Engraçada" também está 
colocada como o foco principal, mesmo que seu tamanho seja 
menor, através do uso das letras em caixa-alta e em bold. Você 
deve decidir qual deles é o "manda-chuva" e enfatizar um dos 
conceitos: 'Fazenda Engraçada" ou 'Seguro Saúde”. 

Vamos dançar: Contraste. Mesmo que as fontes estejam do mesmo tamanho 

e pertençam à mesma família (a família Formata), os outros 
contrastes são marcantes: peso, forma (roman versus itálico e 
caixa-alta versus caixa-baixa), estrutura (contrastes de peso), cor 
(apesar de ambas estarem em preto, o peso de "dançar" faz 
com que a palavra adquira uma cor mais escura). 


Soluções: Desafio n° 7 (página 125) 

1. Errado. Duas fontes manuscritas entrarão em conflito entre si porque, em 
geral, têm a mesma forma. 

2. Errado. Fontes da mesma categoria têm a mesma estrutura. 

5. Errado. Eles "brigarão" entre si. Decida qual é o mais importante e 
enfatize-o. 

4. Errado. A maioria das fontes manuscritas e itálicas tem a mesma forma: 
inclinada e flutuante. 

5. Certo. O forte contraste de estrutura e cor é instantâneo. 

6. Certo. O contraste de estrutura e cor é instantâneo. 

7. Errado. Duas fontes detalhadas entrarão em conflito, pois suas 
características marcantes competirão para atraírem as atenções. 

8. Errado. Ao colocar uma fonte em uma página, seu objetivo costuma ser o 
de comunicar. Nunca se esqueça disso. 

9 Certo. 

10. Certo. A lei básica de se quebrar as regras é saber, em primeiro lugar, 

quais são as regras. Se você tiver justificativas para quebrar regras — e se o 
resultado for bom —, vá em frente! 





Fontes 

usadas neste livro 


Foram usadas 103 fontes neste livro. Quando alguém (principalmente 
um representante/vendedor de fontes) disser que existem 103 fontes, ele 
já estará incluindo todas as variações de uma fonte: a versão regular é 
uma fonte, a itálica é outra, a bold é outra etc. Já que você é (ou era) um 
"não-designer", achei que poderia se interessar em saber exatamente quais 
fontes foram utilizadas neste livro. Também achei interessante mencionar 
os números das páginas em que você encontraria cada fonte, mas creio 
que o processo de identificação das fontes é válido, pois forçaria você a 
prestar muita atenção à tipologia. Portanto, aqui vai uma lista, com cada 
fonte em 14 pontos. Dividi as fontes em categorias para você, o que já 
ajuda bastante. Divirta-se! 


Fontes básicas 


Texto corrido: 


Títulos dos capítulos: 
Títulos principais: 
Números de capítulos: 
Citações: 

Capa: 


Nofret Light, 10/14 (o que significa tipo em 10 
pontos com entrelinha de 14 pontos), espaço 
adicional entreletras de 8%. da Adobe. 

Nofret Médium, 60/60 
Antique Olive Black, da Lintotype-Hell 
Antique Olive Nord, 200/160, 15% de preto 
Langer, criada por Paul Lang, da Monotype 
Glasgow, da Epiphany Design Studio 


Estilo antigo 


Bookman 

Apple 

Bernhard 

Linotype-Hell 

Cochin, Italic, Bold, Bold Italic 

Linotype-Hell 

Garamond Light, Book, 


Bold, Ultra 

Linotype-Hell 

Goudy, Italic 

Linotype-Hell 
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Minion Display 

Adobe 

New Baskerville (itc) 

Linotype-Hell 

Palatino 

Apple 

Photina Regular, Italic 

Monotype 

Times 

Apple 

Moderno 


Bodoni, Italic, Póster, Póster Compressed 

Linotype-Hell 

Fenice (itc) Light, Regular, Bold, Ultra 

Linotype-Hell 

M^drone 

Linotype-Hell 

Nofret Light Light Italic, Regular, 

Médium, Médium Italic, 

Bold, Bold Italic 

Adobe 

Walbaum Roman 

Adobe 

Serifa grossa 


Aachen Bold 

Linotype-Hell 

American Typewriter, Bold 

Adobe 

Blackoak 

Linotype-Hell 

Clarendon Light, Plain, Bold 

Linotype-Hell 

Memphis Light, Médium, 

Bold, Extra Bold 

Linotype-Hell 

New Century Schoolbook 

Apple 

Sem serifa 



Antique Olive Light, Roman, 

Compact, Black, Nord Linotype-Hell 


Eunostile Extended Two, 

Bold Extended Two 


Linotype-Hell 






15 : Fontes utilizadas neste livro ES 


Folio Light, Médium, Bold Condensed 

Linotype-Hell 

Formata Light, Regular, Médium, 
Médium Italic, Bold, Bold Italic 

Linotype-Hell 

Franklin Gothic Book, Heavy, 

Condensed, No. 2 

Linotype-Hell 

Gill Sans Plain, Bold 

Linotype-Hell 

Helvetica, Bold 

Apple 

Imago Extra Bold 

Adobe 

Óptima Plain, Obliqúe > Bold 

Linotype-Hell 

Syntax Black 

Linotype-Hell 

Avant Garde 

Apple 

Manuscrita 


saneo 

Linotype-Hell 

(30 pontos) 

FontHaus 

Cascade Script 

Linotype-Hell 


Linotype-Hell 

Langer Alt. Roman, Italic, 

Boi d, Bold Italic 

Monotype 


Linotype-Hell 

Post Antiqua Roman 

Linotype-Hell 

Reporte* two 

Linotype-Hell 


Linotype-Hell 

Tekton 

Adobe 

Zapf Cfiancery 

Apple 
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Decorativa _ 

Addled 

EX7RAVAGAMZA 

FAJlTA MlLD, PISátíTi 
Impr ov 'Regular, Inline 

LITHOS LIGHT, BOLP 

SCMUTT 

JUNIPER 


Ornamentais 


FontBank 
Olduvai 
Image Club 
Image Club 
Adobe 

Scarlett, minha filha 
Linotype-Hell 


Birds, FontHaus 
Primitives, FontHaus 

Woodtype Omaments, 
Linotype-Hell 


• A 


Zapf Dingbats, Apple 




